<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An enterprise-class UI design language and React-based implementation with a set of high-quality React components, one of best React UI library for enterprises">
    <title>Ant Design - A UI Design Language</title>
    <link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/index-1.css"/>
    <link rel="stylesheet" type="text/css" href="/index-2.css"/>
    <style id="nprogress-style">
      #nprogress { display: none }
    </style>
    <link rel="stylesheet/less" type="text/css" href="/color.less"/>
    <script src="https://gw.alipayobjects.com/os/lib/??es6-shim/0.35.3/es6-sham.min.js,es6-shim/0.35.3/es6-shim.min.js"></script>
    <!--[if lte IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->
    <script>
    if (!window.Intl) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
    }
    </script>
    <script>
    (function() {
      function isLocalStorageNameSupported() {
        var testKey = 'test';
        var storage = window.localStorage;
        try {
          storage.setItem(testKey, '1');
          storage.removeItem(testKey);
          return true;
        } catch (error) {
          return false;
        }
      }
      // 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
      var pathname = location.pathname;

      function isZhCN(pathname) {
        return /-cn\/?$/.test(pathname);
      }
      function getLocalizedPathname(path, zhCN) {
        var pathname = path.startsWith('/') ? path : '/' + path;
        if (!zhCN) { // to enUS
          return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
        } else if (pathname === '/') {
          return '/index-cn';
        } else if (pathname.endsWith('/')) {
          return pathname.replace(/\/$/, '-cn/');
        }
        return pathname + '-cn';
      }

      // 兼容旧的 URL， `?locale=...`
      var queryString = location.search;
      if (queryString) {
        var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
        if (isZhCNConfig && !isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
        }
      }

      // 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
      if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
        var lang = (window.localStorage && localStorage.getItem('locale')) || ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
        // safari is 'zh-cn', while other browser is 'zh-CN';
        if ((lang === 'zh-CN') !== isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
        }
      }
      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
    })()
    </script>
  </head>
  <body>
    <div id="react-content">
      <div class="page-wrapper"><header id="header" class="clearfix"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a id="logo" href="/index-cn"><img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/><img alt="Ant Design" src="https://gw.alipayobjects.com/zos/rmsportal/DkKNubTaaVsKURhcVGkh.svg"/></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div id="search-box"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i><input type="text" placeholder="在 ant.design 中搜索" class="ant-input"/></div><button type="button" class="ant-btn header-lang-button ant-btn-sm ant-btn-background-ghost"><span>English</span></button><div class="ant-select-sm version ant-select ant-select-enabled"><div class="ant-select-selection
            ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0"><div class="ant-select-selection__rendered"><div class="ant-select-selection-selected-value" title="3.10.3" style="display:block;opacity:1">3.10.3</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none" unselectable="on"><i class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div><ul class="ant-menu menu-site ant-menu-light ant-menu-root ant-menu-horizontal" id="nav" role="menu"><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/index-cn"><span>首页</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/docs/spec/introduce-cn"><span>设计语言</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem"><a href="/docs/react/introduce-cn"><span>组件</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="http://pro.ant.design" class="header-link" target="_blank" rel="noopener noreferrer"><span>PRO</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="https://www.yuque.com/ant-design/course" class="header-link" target="_blank" rel="noopener noreferrer">教程<span style="display:inline-block;position:relative;top:-2px;width:6px;margin-left:8px"><span class="ant-badge ant-badge-not-a-wrapper"><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup></span></span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul></div></div></header><div class="main-wrapper"><div class="ant-row"><div class="main-menu ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4"><ul class="ant-menu aside-container menu-site ant-menu-light ant-menu-root ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/introduce-cn">Ant Design of React</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/getting-started-cn">快速上手</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/practical-projects-cn">项目实战</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/use-with-create-react-app-cn">在 create-react-app 中使用</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/use-in-typescript-cn">在 TypeScript 中使用</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/customize-theme-cn">定制主题</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/changelog-cn">更新日志</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/recommendation-cn">社区精选组件</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/i18n-cn">国际化</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/faq-cn">FAQ</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/contributing-cn">贡献指南</a></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true"><h4>Components</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Components$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="General">General</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/button-cn/"><span>Button</span><span class="chinese">按钮</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/icon-cn/"><span>Icon</span><span class="chinese">图标</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Layout">Layout</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/grid-cn/"><span>Grid</span><span class="chinese">栅格</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/layout-cn/"><span>Layout</span><span class="chinese">布局</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Navigation">Navigation</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/affix-cn/"><span>Affix</span><span class="chinese">固钉</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/breadcrumb-cn/"><span>Breadcrumb</span><span class="chinese">面包屑</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/dropdown-cn/"><span>Dropdown</span><span class="chinese">下拉菜单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/menu-cn/"><span>Menu</span><span class="chinese">导航菜单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/pagination-cn/"><span>Pagination</span><span class="chinese">分页</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/steps-cn/"><span>Steps</span><span class="chinese">步骤条</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Data Entry">Data Entry</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/auto-complete-cn/"><span>AutoComplete</span><span class="chinese">自动完成</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/cascader-cn/"><span>Cascader</span><span class="chinese">级联选择</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/checkbox-cn/"><span>Checkbox</span><span class="chinese">多选框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/date-picker-cn/"><span>DatePicker</span><span class="chinese">日期选择框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/form-cn/"><span>Form</span><span class="chinese">表单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/input-cn/"><span>Input</span><span class="chinese">输入框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/input-number-cn/"><span>InputNumber</span><span class="chinese">数字输入框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/mention-cn/"><span>Mention</span><span class="chinese">提及</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/rate-cn/"><span>Rate</span><span class="chinese">评分</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/radio-cn/"><span>Radio</span><span class="chinese">单选框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/select-cn/"><span>Select</span><span class="chinese">选择器</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/slider-cn/"><span>Slider</span><span class="chinese">滑动输入条</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/switch-cn/"><span>Switch</span><span class="chinese">开关</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tree-select-cn/"><span>TreeSelect</span><span class="chinese">树选择</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/time-picker-cn/"><span>TimePicker</span><span class="chinese">时间选择框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/transfer-cn/"><span>Transfer</span><span class="chinese">穿梭框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/upload-cn/"><span>Upload</span><span class="chinese">上传</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Data Display">Data Display</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/avatar-cn/"><span>Avatar</span><span class="chinese">头像</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/badge-cn/"><span>Badge</span><span class="chinese">徽标数</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/calendar-cn/"><span>Calendar</span><span class="chinese">日历</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/card-cn/"><span>Card</span><span class="chinese">卡片</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/carousel-cn/"><span>Carousel</span><span class="chinese">走马灯</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/collapse-cn/"><span>Collapse</span><span class="chinese">折叠面板</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/list-cn/"><span>List</span><span class="chinese">列表</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/popover-cn/"><span>Popover</span><span class="chinese">气泡卡片</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tooltip-cn/"><span>Tooltip</span><span class="chinese">文字提示</span></a></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem" style="padding-left:80px"><a href="/components/table-cn/"><span>Table</span><span class="chinese">表格</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tabs-cn/"><span>Tabs</span><span class="chinese">标签页</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tag-cn/"><span>Tag</span><span class="chinese">标签</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/timeline-cn/"><span>Timeline</span><span class="chinese">时间轴</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tree-cn/"><span>Tree</span><span class="chinese">树形控件</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Feedback">Feedback</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/alert-cn/"><span>Alert</span><span class="chinese">警告提示</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/drawer-cn/"><span>Drawer</span><span class="chinese">抽屉</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/modal-cn/"><span>Modal</span><span class="chinese">对话框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/message-cn/"><span>Message</span><span class="chinese">全局提示</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/notification-cn/"><span>Notification</span><span class="chinese">通知提醒框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/progress-cn/"><span>Progress</span><span class="chinese">进度条</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/popconfirm-cn/"><span>Popconfirm</span><span class="chinese">气泡确认框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/spin-cn/"><span>Spin</span><span class="chinese">加载中</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/skeleton-cn/"><span>Skeleton</span><span class="chinese">骨架屏</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Other">Other</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/anchor-cn/"><span>Anchor</span><span class="chinese">锚点</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/back-top-cn/"><span>BackTop</span><span class="chinese">回到顶部</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/divider-cn/"><span>Divider</span><span class="chinese">分割线</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/locale-provider-cn/"><span>LocaleProvider</span><span class="chinese">国际化</span></a></li></ul></li></ul></li></ul></div><div class="main-container main-container-component ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20"><article><div class="toc-affix"><div class=""><ul id="demo-toc" class="toc"><li title="基本用法"><a href="#components-table-demo-basic">基本用法</a></li><li title="JSX 风格的 API"><a href="#components-table-demo-jsx">JSX 风格的 API</a></li><li title="可选择"><a href="#components-table-demo-row-selection">可选择</a></li><li title="选择和操作"><a href="#components-table-demo-row-selection-and-operation">选择和操作</a></li><li title="自定义选择项"><a href="#components-table-demo-row-selection-custom">自定义选择项</a></li><li title="可控的筛选和排序"><a href="#components-table-demo-reset-filter">可控的筛选和排序</a></li><li title="筛选和排序"><a href="#components-table-demo-head">筛选和排序</a></li><li title="自定义筛选菜单"><a href="#components-table-demo-custom-filter-panel">自定义筛选菜单</a></li><li title="远程加载数据"><a href="#components-table-demo-ajax">远程加载数据</a></li><li title="紧凑型"><a href="#components-table-demo-size">紧凑型</a></li><li title="带边框"><a href="#components-table-demo-bordered">带边框</a></li><li title="可展开"><a href="#components-table-demo-expand">可展开</a></li><li title="表格行/列合并"><a href="#components-table-demo-colspan-rowspan">表格行/列合并</a></li><li title="树形数据展示"><a href="#components-table-demo-expand-children">树形数据展示</a></li><li title="固定表头"><a href="#components-table-demo-fixed-header">固定表头</a></li><li title="固定列"><a href="#components-table-demo-fixed-columns">固定列</a></li><li title="固定头和列"><a href="#components-table-demo-fixed-columns-header">固定头和列</a></li><li title="表头分组"><a href="#components-table-demo-grouping-columns">表头分组</a></li><li title="可编辑单元格"><a href="#components-table-demo-edit-cell">可编辑单元格</a></li><li title="可编辑行"><a href="#components-table-demo-edit-row">可编辑行</a></li><li title="嵌套子表格"><a href="#components-table-demo-nested-table">嵌套子表格</a></li><li title="拖拽排序"><a href="#components-table-demo-drag-sorting">拖拽排序</a></li><li title="可伸缩列"><a href="#components-table-demo-resizable-column">可伸缩列</a></li><li title="动态控制表格属性"><a href="#components-table-demo-dynamic-settings">动态控制表格属性</a></li></ul></div></div><section class="markdown"><h1>Table<span class="subtitle">表格</span><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/index.zh-CN.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></h1><section class="markdown"><p>展示行列数据。</p><h2 id="设计师专属"><span>设计师专属</span><a href="#设计师专属" class="anchor">#</a></h2><p>安装 <a href="https://kitchen.alipay.com/">Kitchen Sketch 插件 💎</a>，两步就可以自动生成 Ant Design 表格组件。</p><h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2><ul><li><p>当有大量结构化的数据需要展现时；</p></li><li><p>当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。</p></li></ul><h2 id="如何使用"><span>如何使用</span><a href="#如何使用" class="anchor">#</a></h2><p>指定表格的数据源 <code>dataSource</code> 为一个数组。</p><pre class="language-jsx"><code><span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'胡彦斌'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'西湖区湖底公园1号'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'胡彦祖'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'西湖区湖底公园1号'</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'姓名'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'年龄'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'住址'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dataSource<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span></code></pre></section><h2><span>代码演示</span><i class="anticon anticon-appstore-o code-box-expand-trigger"><svg viewBox="64 64 896 896" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px"><div style="padding-left:8px;padding-right:8px" class="ant-col-24 code-boxes-col-1-1"><section class="code-box" id="components-table-demo-basic"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class=""><div>Address</div></th><th class=""><div>Tags</div></th><th class=""><div>Action</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">John Brown</a></td><td class="">32</td><td class="">New York No. 1 Lake Park</td><td class=""><span><div data-show="true" class="ant-tag ant-tag-blue">nice</div><div data-show="true" class="ant-tag ant-tag-blue">developer</div></span></td><td class=""><span><a href="javascript:;">Invite <!-- -->John Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">Jim Green</a></td><td class="">42</td><td class="">London No. 1 Lake Park</td><td class=""><span><div data-show="true" class="ant-tag ant-tag-blue">loser</div></span></td><td class=""><span><a href="javascript:;">Invite <!-- -->Jim Green</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">Joe Black</a></td><td class="">32</td><td class="">Sidney No. 1 Lake Park</td><td class=""><span><div data-show="true" class="ant-tag ant-tag-blue">cool</div><div data-show="true" class="ant-tag ant-tag-blue">teacher</div></span></td><td class=""><span><a href="javascript:;">Invite <!-- -->Joe Black</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a></span></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-basic">基本用法</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/basic.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>简单的表格，最后一列是各种操作。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;基本用法 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Divider<span class="token punctuation">,</span> Tag <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> text <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Tags'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'tags'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'tags'</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> tags <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
      <span class="token punctuation">{</span>tags<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>tag <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Tag</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>tag<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>tag<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Tag</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'action'</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Invite <span class="token punctuation">{</span>record<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Divider</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
  tags<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'nice'</span><span class="token punctuation">,</span> <span class="token string">'developer'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
  tags<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'loser'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
  tags<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'cool'</span><span class="token punctuation">,</span> <span class="token string">'teacher'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-jsx"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class="" colSpan="2"><div>Name</div></th><th class="" rowspan="2"><div>Age</div></th><th class="" rowspan="2"><div>Address</div></th><th class="" rowspan="2"><div>Tags</div></th><th class="" rowspan="2"><div>Action</div></th></tr><tr><th class=""><div>First Name</div></th><th class=""><div>Last Name</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John</td><td class="">Brown</td><td class="">32</td><td class="">New York No. 1 Lake Park</td><td class=""><span><div data-show="true" class="ant-tag ant-tag-blue">nice</div><div data-show="true" class="ant-tag ant-tag-blue">developer</div></span></td><td class=""><span><a href="javascript:;">Invite <!-- -->Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Jim</td><td class="">Green</td><td class="">42</td><td class="">London No. 1 Lake Park</td><td class=""><span><div data-show="true" class="ant-tag ant-tag-blue">loser</div></span></td><td class=""><span><a href="javascript:;">Invite <!-- -->Green</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Joe</td><td class="">Black</td><td class="">32</td><td class="">Sidney No. 1 Lake Park</td><td class=""><span><div data-show="true" class="ant-tag ant-tag-blue">cool</div><div data-show="true" class="ant-tag ant-tag-blue">teacher</div></span></td><td class=""><span><a href="javascript:;">Invite <!-- -->Black</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a></span></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-jsx">JSX 风格的 API</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/jsx.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>使用 JSX 风格的 API（2.5.0 以后引入）</p><blockquote><p>这个只是一个描述 <code>columns</code> 的语法糖，所以你不能用其他组件去包裹 <code>Column</code> 和 <code>ColumnGroup</code>。</p></blockquote></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;JSX 风格的 API - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Divider<span class="token punctuation">,</span> Tag <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token punctuation">{</span> Column<span class="token punctuation">,</span> ColumnGroup <span class="token punctuation">}</span> <span class="token operator">=</span> Table<span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  firstName<span class="token punctuation">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span>
  lastName<span class="token punctuation">:</span> <span class="token string">'Brown'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
  tags<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'nice'</span><span class="token punctuation">,</span> <span class="token string">'developer'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  firstName<span class="token punctuation">:</span> <span class="token string">'Jim'</span><span class="token punctuation">,</span>
  lastName<span class="token punctuation">:</span> <span class="token string">'Green'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
  tags<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'loser'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
  firstName<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span>
  lastName<span class="token punctuation">:</span> <span class="token string">'Black'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
  tags<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'cool'</span><span class="token punctuation">,</span> <span class="token string">'teacher'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ColumnGroup</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>First</span> <span class="token attr-name">Name"</span>
        <span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>firstName<span class="token punctuation">"</span></span>
        <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>firstName<span class="token punctuation">"</span></span>
      <span class="token punctuation">/></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Last</span> <span class="token attr-name">Name"</span>
        <span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lastName<span class="token punctuation">"</span></span>
        <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lastName<span class="token punctuation">"</span></span>
      <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ColumnGroup</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>
      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Age<span class="token punctuation">"</span></span>
      <span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>age<span class="token punctuation">"</span></span>
      <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>age<span class="token punctuation">"</span></span>
    <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>
      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Address<span class="token punctuation">"</span></span>
      <span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>address<span class="token punctuation">"</span></span>
      <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>address<span class="token punctuation">"</span></span>
    <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>
      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Tags<span class="token punctuation">"</span></span>
      <span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tags<span class="token punctuation">"</span></span>
      <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tags<span class="token punctuation">"</span></span>
      <span class="token attr-name">render</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>tags <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
          <span class="token punctuation">{</span>tags<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>tag <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">&lt;</span>Tag color<span class="token operator">=</span><span class="token string">"blue"</span> key<span class="token punctuation">=</span><span class="token punctuation">{</span>tag<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>tag<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Tag</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
      <span class="token punctuation">)</span><span class="token punctuation">}</span>
    <span class="token operator">/</span><span class="token operator">></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>
      <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Action<span class="token punctuation">"</span></span>
      <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>action<span class="token punctuation">"</span></span>
      <span class="token attr-name">render</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Invite <span class="token punctuation">{</span>record<span class="token punctuation">.</span>lastName<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Divider</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
      <span class="token punctuation">)</span><span class="token punctuation">}</span></span>
    <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Table</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-row-selection"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-selection-column"><div><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></div></div></th><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class=""><div>Address</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" name="John Brown" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">John Brown</a></td><td class="">32</td><td class="">New York No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" name="Jim Green" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">Jim Green</a></td><td class="">42</td><td class="">London No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" name="Joe Black" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">Joe Black</a></td><td class="">32</td><td class="">Sidney No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" name="Disabled User" disabled="" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">Disabled User</a></td><td class="">99</td><td class="">Sidney No. 1 Lake Park</td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-row-selection">可选择</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/row-selection.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>第一列是联动的选择框。</p><blockquote><p>默认点击 checkbox 触发选择行为，需要点击行触发可以参考例子：<a href="https://codesandbox.io/s/000vqw38rl">https://codesandbox.io/s/000vqw38rl</a></p></blockquote></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;可选择 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> text <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Disabled User'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">99</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// rowSelection object indicates the need for row selection</span>
<span class="token keyword">const</span> rowSelection <span class="token operator">=</span> <span class="token punctuation">{</span>
  onChange<span class="token punctuation">:</span> <span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`selectedRowKeys: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selectedRowKeys<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span> <span class="token string">'selectedRows: '</span><span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  getCheckboxProps<span class="token punctuation">:</span> record <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
    disabled<span class="token punctuation">:</span> record<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'Disabled User'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// Column configuration not to be checked</span>
    name<span class="token punctuation">:</span> record<span class="token punctuation">.</span>name<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">rowSelection</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rowSelection<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-row-selection-and-operation"><section class="code-box-demo"><div><div style="margin-bottom:16px"><button disabled="" type="button" class="ant-btn ant-btn-primary"><span>Reload</span></button><span style="margin-left:8px"></span></div><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-selection-column"><div><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></div></div></th><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class=""><div>Address</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 0</td><td class="">32</td><td class="">London, Park Lane no. 0</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 1</td><td class="">32</td><td class="">London, Park Lane no. 1</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 2</td><td class="">32</td><td class="">London, Park Lane no. 2</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 3</td><td class="">32</td><td class="">London, Park Lane no. 3</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 4</td><td class="">32</td><td class="">London, Park Lane no. 4</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="5"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 5</td><td class="">32</td><td class="">London, Park Lane no. 5</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="6"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 6</td><td class="">32</td><td class="">London, Park Lane no. 6</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="7"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 7</td><td class="">32</td><td class="">London, Park Lane no. 7</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="8"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 8</td><td class="">32</td><td class="">London, Park Lane no. 8</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="9"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 9</td><td class="">32</td><td class="">London, Park Lane no. 9</td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" tabindex="0"><a>2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" tabindex="0"><a>3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" tabindex="0"><a>4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" tabindex="0"><a>5</a></li><li title="下一页" tabindex="0" class=" ant-pagination-next" aria-disabled="false"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-row-selection-and-operation">选择和操作</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/row-selection-and-operation.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>选择后进行操作，完成后清空选择，通过 <code>rowSelection.selectedRowKeys</code> 来控制选中项。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;选择和操作 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">46</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Edward King </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
    age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
    address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`London, Park Lane no. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    selectedRowKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// Check here to configure the default column</span>
    loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  start <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> loading<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// ajax request after empty completing</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        selectedRowKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  onSelectChange <span class="token operator">=</span> <span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'selectedRowKeys changed: '</span><span class="token punctuation">,</span> selectedRowKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selectedRowKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> loading<span class="token punctuation">,</span> selectedRowKeys <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">const</span> rowSelection <span class="token operator">=</span> <span class="token punctuation">{</span>
      selectedRowKeys<span class="token punctuation">,</span>
      onChange<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onSelectChange<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> hasSelected <span class="token operator">=</span> selectedRowKeys<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginBottom<span class="token punctuation">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span>
            <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span>
            <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>start<span class="token punctuation">}</span></span>
            <span class="token attr-name">disabled</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span>hasSelected<span class="token punctuation">}</span></span>
            <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>loading<span class="token punctuation">}</span></span>
          <span class="token punctuation">></span></span>
            Reload
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginLeft<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
            <span class="token punctuation">{</span>hasSelected <span class="token operator">?</span> <span class="token template-string"><span class="token string">`Selected </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selectedRowKeys<span class="token punctuation">.</span>length<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> items`</span></span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">}</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">rowSelection</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rowSelection<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-row-selection-custom"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-selection-column ant-table-selection-column-custom"><div><div class="ant-table-selection"><label class="ant-table-selection-select-all-custom ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger"><i class="anticon anticon-down"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></div></div></div></th><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class=""><div>Address</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 0</td><td class="">32</td><td class="">London, Park Lane no. 0</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 1</td><td class="">32</td><td class="">London, Park Lane no. 1</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 2</td><td class="">32</td><td class="">London, Park Lane no. 2</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 3</td><td class="">32</td><td class="">London, Park Lane no. 3</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 4</td><td class="">32</td><td class="">London, Park Lane no. 4</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="5"><td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 5</td><td class="">32</td><td class="">London, Park Lane no. 5</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="6"><td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 6</td><td class="">32</td><td class="">London, Park Lane no. 6</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="7"><td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 7</td><td class="">32</td><td class="">London, Park Lane no. 7</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="8"><td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 8</td><td class="">32</td><td class="">London, Park Lane no. 8</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="9"><td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 9</td><td class="">32</td><td class="">London, Park Lane no. 9</td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" tabindex="0"><a>2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" tabindex="0"><a>3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" tabindex="0"><a>4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" tabindex="0"><a>5</a></li><li title="下一页" tabindex="0" class=" ant-pagination-next" aria-disabled="false"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-row-selection-custom">自定义选择项</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/row-selection-custom.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>通过 <code>rowSelection.selections</code> 自定义选择项，默认不显示下拉选项，设为 <code>true</code> 时显示默认选择项。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;自定义选择项 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">46</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Edward King </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
    age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
    address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`London, Park Lane no. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    selectedRowKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// Check here to configure the default column</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  onSelectChange <span class="token operator">=</span> <span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'selectedRowKeys changed: '</span><span class="token punctuation">,</span> selectedRowKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selectedRowKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> selectedRowKeys <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">const</span> rowSelection <span class="token operator">=</span> <span class="token punctuation">{</span>
      selectedRowKeys<span class="token punctuation">,</span>
      onChange<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onSelectChange<span class="token punctuation">,</span>
      hideDefaultSelections<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      selections<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        key<span class="token punctuation">:</span> <span class="token string">'all-data'</span><span class="token punctuation">,</span>
        text<span class="token punctuation">:</span> <span class="token string">'Select All Data'</span><span class="token punctuation">,</span>
        onSelect<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            selectedRowKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">46</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// 0...45</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        key<span class="token punctuation">:</span> <span class="token string">'odd'</span><span class="token punctuation">,</span>
        text<span class="token punctuation">:</span> <span class="token string">'Select Odd Row'</span><span class="token punctuation">,</span>
        onSelect<span class="token punctuation">:</span> <span class="token punctuation">(</span>changableRowKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
          <span class="token keyword">let</span> newSelectedRowKeys <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
          newSelectedRowKeys <span class="token operator">=</span> changableRowKeys<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selectedRowKeys<span class="token punctuation">:</span> newSelectedRowKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        key<span class="token punctuation">:</span> <span class="token string">'even'</span><span class="token punctuation">,</span>
        text<span class="token punctuation">:</span> <span class="token string">'Select Even Row'</span><span class="token punctuation">,</span>
        onSelect<span class="token punctuation">:</span> <span class="token punctuation">(</span>changableRowKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
          <span class="token keyword">let</span> newSelectedRowKeys <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
          newSelectedRowKeys <span class="token operator">=</span> changableRowKeys<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selectedRowKeys<span class="token punctuation">:</span> newSelectedRowKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      onSelection<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onSelection<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">rowSelection</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rowSelection<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-reset-filter"><section class="code-box-demo"><div><div class="table-operations"><button type="button" class="ant-btn"><span>Sort age</span></button><button type="button" class="ant-btn"><span>Clear filters</span></button><button type="button" class="ant-btn"><span>Clear filters and sorters</span></button></div><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><div title="排序" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="anticon anticon-caret-up ant-table-column-sorter-up off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></i><i class="anticon anticon-caret-down ant-table-column-sorter-down off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></div></div><i title="筛选" class="anticon anticon-filter ant-dropdown-trigger"><svg viewBox="64 64 896 896" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></i></th><th class="ant-table-column-has-actions ant-table-column-has-sorters"><div title="排序" class="ant-table-column-sorters">Age<div class="ant-table-column-sorter"><i class="anticon anticon-caret-up ant-table-column-sorter-up off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></i><i class="anticon anticon-caret-down ant-table-column-sorter-down off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></div></div></th><th class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><div title="排序" class="ant-table-column-sorters">Address<div class="ant-table-column-sorter"><i class="anticon anticon-caret-up ant-table-column-sorter-up off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></i><i class="anticon anticon-caret-down ant-table-column-sorter-down off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></div></div><i title="筛选" class="anticon anticon-filter ant-dropdown-trigger"><svg viewBox="64 64 896 896" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></i></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">32</td><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">New York No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Jim Green</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">42</td><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">London No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Joe Black</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">32</td><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">Sidney No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Jim Red</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">32</td><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">London No. 2 Lake Park</td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></div><style>.table-operations {
  margin-bottom: 16px;
}

.table-operations > button {
  margin-right: 8px;
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-reset-filter">可控的筛选和排序</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/reset-filter.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>使用受控属性对筛选和排序状态进行控制。</p><blockquote><ol><li><p>columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。</p></li><li><p>只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。</p></li><li><p>务必指定 <code>column.key</code>。</p></li></ol></blockquote></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;可控的筛选和排序 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n.table-operations {\n  margin-bottom: 16px;\n}\n\n.table-operations &gt; button {\n  margin-right: 8px;\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESAK00AI1gLSHfhIgU4AAmAAOuS-vipo_LgGCk6ktLSqiL4AjABsKEYA3EHaQUEOzq7uMJ603uR-AHy-TgCucRT-QSFhEVH8ELgAFrSJABzpWeTaINr6hjAmJMzW9IzqQRAqKKT8tL4ASkIYa2D8qr4A5PLbB4OLy6sbW7QAIgDyALK-u_tH10qqpwtLK2sHaIwWAB6FgQKRAgG0FimcxfcjnX6HAhAgzGGFwOFNELYnEjMZo7oqKDTOi2dQAHlBADdfBAWABeAJWOhoAzFJm-KQAT1gjJA6BYoPIuESACYACzpJkVckgiBUipBclwDDtFC0RXBXxU8KhUg1RgAOVIbF89N8ygwNRUtgI-FoAFFYDbGAAhLkASRYAAoDjNWeRigcAJSDWUqtUaka6IA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Red'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 2 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    filteredInfo<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
    sortedInfo<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>pagination<span class="token punctuation">,</span> filters<span class="token punctuation">,</span> sorter<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Various parameters'</span><span class="token punctuation">,</span> pagination<span class="token punctuation">,</span> filters<span class="token punctuation">,</span> sorter<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      filteredInfo<span class="token punctuation">:</span> filters<span class="token punctuation">,</span>
      sortedInfo<span class="token punctuation">:</span> sorter<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  clearFilters <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> filteredInfo<span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  clearAll <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      filteredInfo<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
      sortedInfo<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  setAgeSort <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      sortedInfo<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        order<span class="token punctuation">:</span> <span class="token string">'descend'</span><span class="token punctuation">,</span>
        columnKey<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> <span class="token punctuation">{</span> sortedInfo<span class="token punctuation">,</span> filteredInfo <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    sortedInfo <span class="token operator">=</span> sortedInfo <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    filteredInfo <span class="token operator">=</span> filteredInfo <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
      key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
      filters<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'Joe'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'Jim'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'Jim'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      filteredValue<span class="token punctuation">:</span> filteredInfo<span class="token punctuation">.</span>name <span class="token operator">||</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
      onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">,</span>
      sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>name<span class="token punctuation">.</span>length <span class="token operator">-</span> b<span class="token punctuation">.</span>name<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
      sortOrder<span class="token punctuation">:</span> sortedInfo<span class="token punctuation">.</span>columnKey <span class="token operator">===</span> <span class="token string">'name'</span> <span class="token operator">&amp;&amp;</span> sortedInfo<span class="token punctuation">.</span>order<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
      key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
      sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>age <span class="token operator">-</span> b<span class="token punctuation">.</span>age<span class="token punctuation">,</span>
      sortOrder<span class="token punctuation">:</span> sortedInfo<span class="token punctuation">.</span>columnKey <span class="token operator">===</span> <span class="token string">'age'</span> <span class="token operator">&amp;&amp;</span> sortedInfo<span class="token punctuation">.</span>order<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
      key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
      filters<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'London'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'London'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'New York'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'New York'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      filteredValue<span class="token punctuation">:</span> filteredInfo<span class="token punctuation">.</span>address <span class="token operator">||</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
      onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>address<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">,</span>
      sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>address<span class="token punctuation">.</span>length <span class="token operator">-</span> b<span class="token punctuation">.</span>address<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
      sortOrder<span class="token punctuation">:</span> sortedInfo<span class="token punctuation">.</span>columnKey <span class="token operator">===</span> <span class="token string">'address'</span> <span class="token operator">&amp;&amp;</span> sortedInfo<span class="token punctuation">.</span>order<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>table-operations<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>setAgeSort<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Sort age<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>clearFilters<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Clear filters<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>clearAll<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Clear filters and sorters<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token selector"><span class="token class">.table-operations</span> </span><span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.table-operations</span> > button </span><span class="token punctuation">{</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-head"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><div title="排序" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="anticon anticon-caret-up ant-table-column-sorter-up off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></i><i class="anticon anticon-caret-down ant-table-column-sorter-down off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></div></div><i title="筛选" class="anticon anticon-filter ant-dropdown-trigger"><svg viewBox="64 64 896 896" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></i></th><th class="ant-table-column-has-actions ant-table-column-has-sorters ant-table-column-sort"><div title="排序" class="ant-table-column-sorters">Age<div class="ant-table-column-sorter"><i class="anticon anticon-caret-up ant-table-column-sorter-up off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></i><i class="anticon anticon-caret-down ant-table-column-sorter-down on"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></div></div></th><th class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><div title="排序" class="ant-table-column-sorters">Address<div class="ant-table-column-sorter"><i class="anticon anticon-caret-up ant-table-column-sorter-up off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></i><i class="anticon anticon-caret-down ant-table-column-sorter-down off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></div></div><i title="筛选" class="anticon anticon-filter ant-dropdown-trigger"><svg viewBox="64 64 896 896" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></i></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Jim Green</td><td class="ant-table-column-has-actions ant-table-column-has-sorters ant-table-column-sort">42</td><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">London No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters ant-table-column-sort">32</td><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">New York No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Joe Black</td><td class="ant-table-column-has-actions ant-table-column-has-sorters ant-table-column-sort">32</td><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">Sidney No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Jim Red</td><td class="ant-table-column-has-actions ant-table-column-has-sorters ant-table-column-sort">32</td><td class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">London No. 2 Lake Park</td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-head">筛选和排序</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/head.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>对某一列数据进行筛选，使用列的 <code>filters</code> 属性来指定需要筛选菜单的列，<code>onFilter</code> 用于筛选当前数据，<code>filterMultiple</code> 用于指定多选和单选。</p><p>对某一列数据进行排序，通过指定列的 <code>sorter</code> 函数即可启动排序按钮。<code>sorter: function(rowA, rowB) { ... }</code>， rowA、rowB 为比较的两个行数据。</p><p>使用 <code>defaultSortOrder</code> 属性，设置列的默认排序顺序。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;筛选和排序 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  filters<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    text<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span>
    value<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    text<span class="token punctuation">:</span> <span class="token string">'Jim'</span><span class="token punctuation">,</span>
    value<span class="token punctuation">:</span> <span class="token string">'Jim'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    text<span class="token punctuation">:</span> <span class="token string">'Submenu'</span><span class="token punctuation">,</span>
    value<span class="token punctuation">:</span> <span class="token string">'Submenu'</span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      text<span class="token punctuation">:</span> <span class="token string">'Green'</span><span class="token punctuation">,</span>
      value<span class="token punctuation">:</span> <span class="token string">'Green'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      text<span class="token punctuation">:</span> <span class="token string">'Black'</span><span class="token punctuation">,</span>
      value<span class="token punctuation">:</span> <span class="token string">'Black'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment" spellcheck="true">// specify the condition of filtering result</span>
  <span class="token comment" spellcheck="true">// here is that finding the name started with `value`</span>
  onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">,</span>
  sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>name<span class="token punctuation">.</span>length <span class="token operator">-</span> b<span class="token punctuation">.</span>name<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
  defaultSortOrder<span class="token punctuation">:</span> <span class="token string">'descend'</span><span class="token punctuation">,</span>
  sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>age <span class="token operator">-</span> b<span class="token punctuation">.</span>age<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
  filters<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    text<span class="token punctuation">:</span> <span class="token string">'London'</span><span class="token punctuation">,</span>
    value<span class="token punctuation">:</span> <span class="token string">'London'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    text<span class="token punctuation">:</span> <span class="token string">'New York'</span><span class="token punctuation">,</span>
    value<span class="token punctuation">:</span> <span class="token string">'New York'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  filterMultiple<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>address<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">,</span>
  sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>address<span class="token punctuation">.</span>length <span class="token operator">-</span> b<span class="token punctuation">.</span>address<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Red'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 2 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">onChange</span><span class="token punctuation">(</span>pagination<span class="token punctuation">,</span> filters<span class="token punctuation">,</span> sorter<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'params'</span><span class="token punctuation">,</span> pagination<span class="token punctuation">,</span> filters<span class="token punctuation">,</span> sorter<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-custom-filter-panel"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-column-has-actions ant-table-column-has-filters"><div>Name</div><i style="color:#aaa" title="筛选" class="anticon anticon-smile-o ant-table-filter-icon ant-dropdown-trigger"><svg viewBox="64 64 896 896" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></th><th class=""><div>Age</div></th><th class="ant-table-column-has-actions ant-table-column-has-filters"><div>Address</div><i title="筛选" class="anticon anticon-filter ant-dropdown-trigger"><svg viewBox="64 64 896 896" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></i></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="">32</td><td class="ant-table-column-has-actions ant-table-column-has-filters">New York No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Joe Black</td><td class="">42</td><td class="ant-table-column-has-actions ant-table-column-has-filters">London No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Jim Green</td><td class="">32</td><td class="ant-table-column-has-actions ant-table-column-has-filters">Sidney No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Jim Red</td><td class="">32</td><td class="ant-table-column-has-actions ant-table-column-has-filters">London No. 2 Lake Park</td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div><style>.custom-filter-dropdown {
  padding: 8px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

.custom-filter-dropdown input {
  width: 130px;
  margin-right: 8px;
}

.custom-filter-dropdown button {
  margin-right: 8px;
}

.highlight {
  color: #f50;
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-custom-filter-panel">自定义筛选菜单</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/custom-filter-panel.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>通过 <code>filterDropdown</code> 自定义的列筛选功能，并实现一个搜索列的示例。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;自定义筛选菜单 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n.custom-filter-dropdown {\n  padding: 8px;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);\n}\n\n.custom-filter-dropdown input {\n  width: 130px;\n  margin-right: 8px;\n}\n\n.custom-filter-dropdown button {\n  margin-right: 8px;\n}\n\n.highlight {\n  color: #f50;\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESFMBXKaoWQo9fkv6kUygO7kAATAADpBgegsLAa4iIEAHChGANxhgYEARqT8bJ78aNFOcQBsSanhGZhYuN4OhnEAxGDN5elZRgpwABYFpH5xAAyBAIxJgaVGgfy4lQAUA9KBC0uLBABMAJTl2mFhjs4qrtAeXj7-QQYoDrTBaYF-ECy0XXHDAMwDZXcqaNMGCvwILgurQ4okUmEduQ9hgnLQXG4TixvL4-kEMtd4UFQuEfn9yACgSCwV9yFC9l0iVAiTccekaFBso0wABWAbbEDafSGGAmEjMaz0RjqMIQFQobI3ABKQgwNzA3hUgQA5PI5crymKJfxpbLaAARADyAFlAgrVCq1bQlKoNaLxZKVWhGCwAPTRKSu520Fimcx28hax3KgiugzGP1wAN3dKx2Oc7kRkEqKACui2dQAHmiADdAo8ALwhKx0NAGGD8YuBKQAT1gRZAkWi5FigTWABYksWAHyZ90QHPdsKZuAYQEoWhD8I536BFSkOq0ABypDYgQLgWUsJUtgI-FoAFFYDvGAAhGsASRYs2VgrL5Aryq2w9do_Hk85uiAA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Red'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 2 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    searchText<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  handleSearch <span class="token operator">=</span> <span class="token punctuation">(</span>selectedKeys<span class="token punctuation">,</span> confirm<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token function">confirm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> searchText<span class="token punctuation">:</span> selectedKeys<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleReset <span class="token operator">=</span> clearFilters <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token function">clearFilters</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> searchText<span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
      key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
      filterDropdown<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> setSelectedKeys<span class="token punctuation">,</span> selectedKeys<span class="token punctuation">,</span> confirm<span class="token punctuation">,</span> clearFilters <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>custom-filter-dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Input</span>
            <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>ele <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span>searchInput <span class="token operator">=</span> ele<span class="token punctuation">}</span></span>
            <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search</span> <span class="token attr-name">name"</span>
            <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>selectedKeys<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
            <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>e <span class="token operator">=</span><span class="token operator">></span> <span class="token function">setSelectedKeys</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token operator">?</span> <span class="token punctuation">[</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">]</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
            <span class="token attr-name">onPressEnter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleSearch</span><span class="token punctuation">(</span>selectedKeys<span class="token punctuation">,</span> confirm<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
          <span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleSearch</span><span class="token punctuation">(</span>selectedKeys<span class="token punctuation">,</span> confirm<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleReset</span><span class="token punctuation">(</span>clearFilters<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Reset<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      filterIcon<span class="token punctuation">:</span> filtered <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>smile-o<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token punctuation">:</span> filtered <span class="token operator">?</span> <span class="token string">'#108ee9'</span> <span class="token punctuation">:</span> <span class="token string">'#aaa'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
      onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>value<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      onFilterDropdownVisibleChange<span class="token punctuation">:</span> <span class="token punctuation">(</span>visible<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>visible<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>searchInput<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> searchText <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
        <span class="token keyword">return</span> searchText <span class="token operator">?</span> <span class="token punctuation">(</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
            <span class="token punctuation">{</span>text<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`(?&lt;=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>searchText<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)|(?=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>searchText<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)`</span></span><span class="token punctuation">,</span> <span class="token string">'i'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>fragment<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
              fragment<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> searchText<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>i<span class="token punctuation">}</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>highlight<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>fragment<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token punctuation">:</span> fragment <span class="token comment" spellcheck="true">// eslint-disable-line</span>
            <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
        <span class="token punctuation">)</span> <span class="token punctuation">:</span> text<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
      key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
      key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
      filters<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        text<span class="token punctuation">:</span> <span class="token string">'London'</span><span class="token punctuation">,</span>
        value<span class="token punctuation">:</span> <span class="token string">'London'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        text<span class="token punctuation">:</span> <span class="token string">'New York'</span><span class="token punctuation">,</span>
        value<span class="token punctuation">:</span> <span class="token string">'New York'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>address<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token selector"><span class="token class">.custom-filter-dropdown</span> </span><span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">6</span>px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">1</span>px <span class="token number">6</span>px <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span>, <span class="token number">0</span>, <span class="token number">0</span>, <span class="token number">.2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.custom-filter-dropdown</span> input </span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">130</span>px<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.custom-filter-dropdown</span> button </span><span class="token punctuation">{</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.highlight</span> </span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#f50</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-ajax"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col style="width:20%;min-width:20%"/><col style="width:20%;min-width:20%"/><col/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-column-has-actions ant-table-column-has-sorters"><div title="排序" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="anticon anticon-caret-up ant-table-column-sorter-up off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></i><i class="anticon anticon-caret-down ant-table-column-sorter-down off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></div></div></th><th class="ant-table-column-has-actions ant-table-column-has-filters"><div>Gender</div><i title="筛选" class="anticon anticon-filter ant-dropdown-trigger"><svg viewBox="64 64 896 896" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></i></th><th class=""><div>Email</div></th></tr></thead><tbody class="ant-table-tbody"></tbody></table></div><div class="ant-table-placeholder">暂无数据</div></div></div></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-ajax">远程加载数据</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/ajax.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。</p><p>另外，本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的 <code>onFilter</code> 和 <code>sorter</code> 函数，而是在把筛选和排序的参数发到服务端来处理。</p><p><strong>注意，此示例使用 <a href="https://randomuser.me">模拟接口</a>，展示数据可能不准确，请打开网络面板查看请求。</strong></p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;远程加载数据 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> reqwest <span class="token keyword">from</span> <span class="token string">'reqwest'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  sorter<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> name <span class="token operator">=</span><span class="token operator">></span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token punctuation">.</span>last<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
  width<span class="token punctuation">:</span> <span class="token string">'20%'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Gender'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'gender'</span><span class="token punctuation">,</span>
  filters<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'Male'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'male'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'Female'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'female'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  width<span class="token punctuation">:</span> <span class="token string">'20%'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Email'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'email'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    pagination<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  handleTableChange <span class="token operator">=</span> <span class="token punctuation">(</span>pagination<span class="token punctuation">,</span> filters<span class="token punctuation">,</span> sorter<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> pager <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pagination <span class="token punctuation">}</span><span class="token punctuation">;</span>
    pager<span class="token punctuation">.</span>current <span class="token operator">=</span> pagination<span class="token punctuation">.</span>current<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      pagination<span class="token punctuation">:</span> pager<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      results<span class="token punctuation">:</span> pagination<span class="token punctuation">.</span>pageSize<span class="token punctuation">,</span>
      page<span class="token punctuation">:</span> pagination<span class="token punctuation">.</span>current<span class="token punctuation">,</span>
      sortField<span class="token punctuation">:</span> sorter<span class="token punctuation">.</span>field<span class="token punctuation">,</span>
      sortOrder<span class="token punctuation">:</span> sorter<span class="token punctuation">.</span>order<span class="token punctuation">,</span>
      <span class="token operator">...</span>filters<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  fetch <span class="token operator">=</span> <span class="token punctuation">(</span>params <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'params:'</span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> loading<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">reqwest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      url<span class="token punctuation">:</span> <span class="token string">'https://randomuser.me/api'</span><span class="token punctuation">,</span>
      method<span class="token punctuation">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
      data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        results<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
        <span class="token operator">...</span>params<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      type<span class="token punctuation">:</span> <span class="token string">'json'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> pagination <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pagination <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token comment" spellcheck="true">// Read total count from server</span>
      <span class="token comment" spellcheck="true">// pagination.total = data.totalCount;</span>
      pagination<span class="token punctuation">.</span>total <span class="token operator">=</span> <span class="token number">200</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> data<span class="token punctuation">.</span>results<span class="token punctuation">,</span>
        pagination<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
        <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
        <span class="token attr-name">rowKey</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>record <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>login<span class="token punctuation">.</span>uuid<span class="token punctuation">}</span></span>
        <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
        <span class="token attr-name">pagination</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pagination<span class="token punctuation">}</span></span>
        <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loading<span class="token punctuation">}</span></span>
        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleTableChange<span class="token punctuation">}</span></span>
      <span class="token punctuation">/></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-size"><section class="code-box-demo"><div><h4>Middle size table</h4><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-middle ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class=""><div>Address</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="">32</td><td class="">New York No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Jim Green</td><td class="">42</td><td class="">London No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Joe Black</td><td class="">32</td><td class="">Sidney No. 1 Lake Park</td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div><h4>Small size table</h4><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-small ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class=""><div>Address</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="">32</td><td class="">New York No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Jim Green</td><td class="">42</td><td class="">London No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Joe Black</td><td class="">32</td><td class="">Sidney No. 1 Lake Park</td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></div><style>#components-table-demo-size h4 { margin-bottom: 16px; }</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-size">紧凑型</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/size.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>两种紧凑型的列表，小型列表只用于对话框内。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;紧凑型 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\nh4 { margin-bottom: 16px; }&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESAAWAFgAEwZyrT9cBhQCNStLSqiM4AjABsKEYA3M7aINr6hjAmJMzW9IzqADrkECoopPy0zgBKQhglYPyqzgDk8pV10bn5hcVlFbQAIgDyALLO1bUNXUqqza0FRSV1aIwsAPQsEFKL87QspuaTedMddQSLBsbbcLu5zlfXNwlJp_a0KlDpdLbqADwrAG7OECwAXmyVjoaAMMH4wOcUgAnrAgSB0CwVuRcCEAEyOKLAgB8H2WEG-ONyHzgGH4EBQtGJ5Cu3087lIAFdGAA5UhsZwA5zKDBMlS2Aj4WgAUVgAsYACEYQBJFgACjqGTB5AhdQAlC1yPiyRSqTiErogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">></span></span>Middle size table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">></span></span>Small size table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-bordered"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-bordered ant-table-scroll-position-left"><div class="ant-table-title">Header</div><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>Name</div></th><th class="column-money"><div>Cash Assets</div></th><th class=""><div>Address</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">John Brown</a></td><td class="column-money">￥300,000.00</td><td class="">New York No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">Jim Green</a></td><td class="column-money">￥1,256,000.00</td><td class="">London No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">Joe Black</a></td><td class="column-money">￥120,000.00</td><td class="">Sidney No. 1 Lake Park</td></tr></tbody></table></div><div class="ant-table-footer">Footer</div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div><style>th.column-money,
td.column-money {
  text-align: right !important;
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-bordered">带边框</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/bordered.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>添加表格边框线，页头和页脚。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;带边框 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\nth.column-money,\ntd.column-money {\n  text-align: right !important;\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESFoALU6SgBXFeQUqKMAJ7SAHUYWZzcPLx9fAAJgIKio-iNaBTQoCFxyRCj-dIdaKIBCCBUUUn5aNEYAbiDtEG19QxgTEmZrekZ1IOLS8qiAJSEMfLB-VSiAcnlhiZryHrL8weEAEQB5AFko0fGpoeTlFVnuksXJytoWAHoWCCkri5CzOGP5076JgiuDY1NzV7i8SBwPqjV-eRUUDadFs6gAPLcAG5RCAsAC8ASsdDQBhg_ExUSkvlgGJA6BYt3IuCyACYACwoIyYgB8cJuEERzKCcLgGByKFoXPI8URaH4UW8rkYADlSGwomiosoMO5bAR8LQAKKwFS2ABCvgAkiwABQTdo48h4iYASjmbN5_MF9V0QA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> text <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Cash Assets'</span><span class="token punctuation">,</span>
  className<span class="token punctuation">:</span> <span class="token string">'column-money'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'money'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
  money<span class="token punctuation">:</span> <span class="token string">'￥300,000.00'</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
  money<span class="token punctuation">:</span> <span class="token string">'￥1,256,000.00'</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
  money<span class="token punctuation">:</span> <span class="token string">'￥120,000.00'</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
    <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
    <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
    <span class="token attr-name">bordered</span>
    <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'Header'</span><span class="token punctuation">}</span></span>
    <span class="token attr-name">footer</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'Footer'</span><span class="token punctuation">}</span></span>
  <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token selector">th<span class="token class">.column-money</span>,
td<span class="token class">.column-money</span> </span><span class="token punctuation">{</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> right <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-expand"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col class="ant-table-expand-icon-col"/><col/><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-expand-icon-th" title="" rowspan="1"></th><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class=""><div>Address</div></th><th class=""><div>Action</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="">John Brown</td><td class="">32</td><td class="">New York No. 1 Lake Park</td><td class=""><a href="javascript:;">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="">Jim Green</td><td class="">42</td><td class="">London No. 1 Lake Park</td><td class=""><a href="javascript:;">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="">Joe Black</td><td class="">32</td><td class="">Sidney No. 1 Lake Park</td><td class=""><a href="javascript:;">Delete</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-expand">可展开</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/expand.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>当表格内容较多不能一次性完全展示时。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;可展开 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'age'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'address'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'x'</span><span class="token punctuation">,</span> render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span> address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span> description<span class="token punctuation">:</span> <span class="token string">'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span> address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span> description<span class="token punctuation">:</span> <span class="token string">'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span> address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span> description<span class="token punctuation">:</span> <span class="token string">'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
    <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
    <span class="token attr-name">expandedRowRender</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>record <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">&lt;</span>p style<span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> margin<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>record<span class="token punctuation">.</span>description<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
    dataSource<span class="token operator">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span>
  <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-colspan-rowspan"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-bordered ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class="" colSpan="2"><div>Home phone</div></th><th class=""><div>Address</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">John Brown</a></td><td class="">32</td><td class="">0571-22098909</td><td class="">18889898989</td><td class="">New York No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">Jim Green</a></td><td class="">42</td><td class="">0571-22098333</td><td class="">18889898888</td><td class="">London No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">Joe Black</a></td><td class="">32</td><td class="" rowspan="2">0575-22098909</td><td class="">18900010002</td><td class="">Sidney No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">Jim Red</a></td><td class="">18</td><td class="">18900010002</td><td class="">London No. 2 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="5"><td class="" colSpan="5"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><a href="javascript:;">Jake White</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-colspan-rowspan">表格行/列合并</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/colspan-rowspan.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>表头只支持列合并，使用 column 里的 colSpan 进行设置。</p><p>表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;表格行/列合并 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// In the fifth row, other columns are merged into first column</span>
<span class="token comment" spellcheck="true">// by setting it's colSpan to be 0</span>
<span class="token keyword">const</span> renderContent <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> row<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    children<span class="token punctuation">:</span> value<span class="token punctuation">,</span>
    props<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    obj<span class="token punctuation">.</span>props<span class="token punctuation">.</span>colSpan <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> obj<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> row<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">&lt;</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      children<span class="token punctuation">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
      props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        colSpan<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> renderContent<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Home phone'</span><span class="token punctuation">,</span>
  colSpan<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'tel'</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> row<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
      children<span class="token punctuation">:</span> value<span class="token punctuation">,</span>
      props<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      obj<span class="token punctuation">.</span>props<span class="token punctuation">.</span>rowSpan <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment" spellcheck="true">// These two are merged into above cell</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      obj<span class="token punctuation">.</span>props<span class="token punctuation">.</span>rowSpan <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      obj<span class="token punctuation">.</span>props<span class="token punctuation">.</span>colSpan <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> obj<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Phone'</span><span class="token punctuation">,</span>
  colSpan<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'phone'</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> renderContent<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> renderContent<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  tel<span class="token punctuation">:</span> <span class="token string">'0571-22098909'</span><span class="token punctuation">,</span>
  phone<span class="token punctuation">:</span> <span class="token number">18889898989</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
  tel<span class="token punctuation">:</span> <span class="token string">'0571-22098333'</span><span class="token punctuation">,</span>
  phone<span class="token punctuation">:</span> <span class="token number">18889898888</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  tel<span class="token punctuation">:</span> <span class="token string">'0575-22098909'</span><span class="token punctuation">,</span>
  phone<span class="token punctuation">:</span> <span class="token number">18900010002</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Red'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
  tel<span class="token punctuation">:</span> <span class="token string">'0575-22098909'</span><span class="token punctuation">,</span>
  phone<span class="token punctuation">:</span> <span class="token number">18900010002</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London No. 2 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'5'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jake White'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
  tel<span class="token punctuation">:</span> <span class="token string">'0575-22098909'</span><span class="token punctuation">,</span>
  phone<span class="token punctuation">:</span> <span class="token number">18900010002</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Dublin No. 2 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">bordered</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-expand-children"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col style="width:12%;min-width:12%"/><col style="width:30%;min-width:30%"/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-selection-column"><div><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></div></div></th><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class=""><div>Address</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span>John Brown sr.</td><td class="">60</td><td class="">New York No. 1 Lake Park</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span><span class="ant-table-row-expand-icon ant-table-row-spaced"></span>Joe Black</td><td class="">32</td><td class="">Sidney No. 1 Lake Park</td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-expand-children">树形数据展示</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/expand-children.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>表格支持树形数据的展示，可以通过设置 <code>indentSize</code> 以控制每一层的缩进宽度。</p><blockquote><p>注：暂不支持父子数据递归关联选择。</p></blockquote></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;树形数据展示 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
  width<span class="token punctuation">:</span> <span class="token string">'12%'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
  width<span class="token punctuation">:</span> <span class="token string">'30%'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Brown sr.'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
  children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
    age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
    address<span class="token punctuation">:</span> <span class="token string">'New York No. 2 Lake Park'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token string">'John Brown jr.'</span><span class="token punctuation">,</span>
    age<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
    address<span class="token punctuation">:</span> <span class="token string">'New York No. 3 Lake Park'</span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      key<span class="token punctuation">:</span> <span class="token number">121</span><span class="token punctuation">,</span>
      name<span class="token punctuation">:</span> <span class="token string">'Jimmy Brown'</span><span class="token punctuation">,</span>
      age<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
      address<span class="token punctuation">:</span> <span class="token string">'New York No. 3 Lake Park'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> <span class="token number">13</span><span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token string">'Jim Green sr.'</span><span class="token punctuation">,</span>
    age<span class="token punctuation">:</span> <span class="token number">72</span><span class="token punctuation">,</span>
    address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      key<span class="token punctuation">:</span> <span class="token number">131</span><span class="token punctuation">,</span>
      name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
      age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
      address<span class="token punctuation">:</span> <span class="token string">'London No. 2 Lake Park'</span><span class="token punctuation">,</span>
      children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        key<span class="token punctuation">:</span> <span class="token number">1311</span><span class="token punctuation">,</span>
        name<span class="token punctuation">:</span> <span class="token string">'Jim Green jr.'</span><span class="token punctuation">,</span>
        age<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
        address<span class="token punctuation">:</span> <span class="token string">'London No. 3 Lake Park'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        key<span class="token punctuation">:</span> <span class="token number">1312</span><span class="token punctuation">,</span>
        name<span class="token punctuation">:</span> <span class="token string">'Jimmy Green sr.'</span><span class="token punctuation">,</span>
        age<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
        address<span class="token punctuation">:</span> <span class="token string">'London No. 4 Lake Park'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// rowSelection objects indicates the need for row selection</span>
<span class="token keyword">const</span> rowSelection <span class="token operator">=</span> <span class="token punctuation">{</span>
  onChange<span class="token punctuation">:</span> <span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`selectedRowKeys: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selectedRowKeys<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span> <span class="token string">'selectedRows: '</span><span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  onSelect<span class="token punctuation">:</span> <span class="token punctuation">(</span>record<span class="token punctuation">,</span> selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>record<span class="token punctuation">,</span> selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  onSelectAll<span class="token punctuation">:</span> <span class="token punctuation">(</span>selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> changeRows<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> changeRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">rowSelection</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rowSelection<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-header"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-fixed-header ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-scroll"><div class="ant-table-header"><table class=""><colgroup><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class=""><div>Address</div></th></tr></thead></table></div><div class="ant-table-body" style="max-height:240px;overflow-y:scroll"><table class=""><colgroup><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col/></colgroup><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 0</td><td class="">32</td><td class="">London, Park Lane no. 0</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 1</td><td class="">32</td><td class="">London, Park Lane no. 1</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 2</td><td class="">32</td><td class="">London, Park Lane no. 2</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 3</td><td class="">32</td><td class="">London, Park Lane no. 3</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 4</td><td class="">32</td><td class="">London, Park Lane no. 4</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="5"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 5</td><td class="">32</td><td class="">London, Park Lane no. 5</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="6"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 6</td><td class="">32</td><td class="">London, Park Lane no. 6</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="7"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 7</td><td class="">32</td><td class="">London, Park Lane no. 7</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="8"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 8</td><td class="">32</td><td class="">London, Park Lane no. 8</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="9"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 9</td><td class="">32</td><td class="">London, Park Lane no. 9</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="10"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 10</td><td class="">32</td><td class="">London, Park Lane no. 10</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="11"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 11</td><td class="">32</td><td class="">London, Park Lane no. 11</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="12"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 12</td><td class="">32</td><td class="">London, Park Lane no. 12</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="13"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 13</td><td class="">32</td><td class="">London, Park Lane no. 13</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="14"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 14</td><td class="">32</td><td class="">London, Park Lane no. 14</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="15"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 15</td><td class="">32</td><td class="">London, Park Lane no. 15</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="16"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 16</td><td class="">32</td><td class="">London, Park Lane no. 16</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="17"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 17</td><td class="">32</td><td class="">London, Park Lane no. 17</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="18"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 18</td><td class="">32</td><td class="">London, Park Lane no. 18</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="19"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 19</td><td class="">32</td><td class="">London, Park Lane no. 19</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="20"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 20</td><td class="">32</td><td class="">London, Park Lane no. 20</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="21"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 21</td><td class="">32</td><td class="">London, Park Lane no. 21</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="22"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 22</td><td class="">32</td><td class="">London, Park Lane no. 22</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="23"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 23</td><td class="">32</td><td class="">London, Park Lane no. 23</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="24"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 24</td><td class="">32</td><td class="">London, Park Lane no. 24</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="25"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 25</td><td class="">32</td><td class="">London, Park Lane no. 25</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="26"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 26</td><td class="">32</td><td class="">London, Park Lane no. 26</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="27"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 27</td><td class="">32</td><td class="">London, Park Lane no. 27</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="28"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 28</td><td class="">32</td><td class="">London, Park Lane no. 28</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="29"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 29</td><td class="">32</td><td class="">London, Park Lane no. 29</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="30"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 30</td><td class="">32</td><td class="">London, Park Lane no. 30</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="31"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 31</td><td class="">32</td><td class="">London, Park Lane no. 31</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="32"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 32</td><td class="">32</td><td class="">London, Park Lane no. 32</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="33"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 33</td><td class="">32</td><td class="">London, Park Lane no. 33</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="34"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 34</td><td class="">32</td><td class="">London, Park Lane no. 34</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="35"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 35</td><td class="">32</td><td class="">London, Park Lane no. 35</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="36"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 36</td><td class="">32</td><td class="">London, Park Lane no. 36</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="37"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 37</td><td class="">32</td><td class="">London, Park Lane no. 37</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="38"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 38</td><td class="">32</td><td class="">London, Park Lane no. 38</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="39"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 39</td><td class="">32</td><td class="">London, Park Lane no. 39</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="40"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 40</td><td class="">32</td><td class="">London, Park Lane no. 40</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="41"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 41</td><td class="">32</td><td class="">London, Park Lane no. 41</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="42"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 42</td><td class="">32</td><td class="">London, Park Lane no. 42</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="43"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 43</td><td class="">32</td><td class="">London, Park Lane no. 43</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="44"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 44</td><td class="">32</td><td class="">London, Park Lane no. 44</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="45"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 45</td><td class="">32</td><td class="">London, Park Lane no. 45</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="46"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 46</td><td class="">32</td><td class="">London, Park Lane no. 46</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="47"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 47</td><td class="">32</td><td class="">London, Park Lane no. 47</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="48"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 48</td><td class="">32</td><td class="">London, Park Lane no. 48</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="49"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 49</td><td class="">32</td><td class="">London, Park Lane no. 49</td></tr></tbody></table></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" tabindex="0"><a>2</a></li><li title="下一页" tabindex="0" class=" ant-pagination-next" aria-disabled="false"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-fixed-header">固定表头</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/fixed-header.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>方便一页内展示大量数据。</p><p>需要指定 column 的 <code>width</code> 属性，否则列头和内容可能不对齐。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;固定表头 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
  width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Edward King </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
    age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
    address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`London, Park Lane no. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">pagination</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> pageSize<span class="token punctuation">:</span> <span class="token number">50</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">scroll</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> y<span class="token punctuation">:</span> <span class="token number">240</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-columns"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-scroll"><div class="ant-table-body" style="overflow-x:scroll;-webkit-transform:translate3d (0, 0, 0)"><table class="ant-table-fixed" style="width:1300px"><colgroup><col style="width:100px;min-width:100px"/><col style="width:100px;min-width:100px"/><col/><col/><col/><col/><col/><col/><col/><col/><col style="width:100px;min-width:100px"/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-fixed-columns-in-body"><div>Full Name</div></th><th class="ant-table-fixed-columns-in-body"><div>Age</div></th><th class=""><div>Column 1</div></th><th class=""><div>Column 2</div></th><th class=""><div>Column 3</div></th><th class=""><div>Column 4</div></th><th class=""><div>Column 5</div></th><th class=""><div>Column 6</div></th><th class=""><div>Column 7</div></th><th class=""><div>Column 8</div></th><th class="ant-table-fixed-columns-in-body"><div>Action</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-fixed-columns-in-body">32</td><td class="">New York Park</td><td class="">New York Park</td><td class="">New York Park</td><td class="">New York Park</td><td class="">New York Park</td><td class="">New York Park</td><td class="">New York Park</td><td class="">New York Park</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Jim Green</td><td class="ant-table-fixed-columns-in-body">40</td><td class="">London Park</td><td class="">London Park</td><td class="">London Park</td><td class="">London Park</td><td class="">London Park</td><td class="">London Park</td><td class="">London Park</td><td class="">London Park</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr></tbody></table></div></div><div class="ant-table-fixed-left"><div class="ant-table-body-outer" style="-webkit-transform:translate3d (0, 0, 0)"><div class="ant-table-body-inner"><table class="ant-table-fixed"><colgroup><col style="width:100px;min-width:100px"/><col style="width:100px;min-width:100px"/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>Full Name</div></th><th class=""><div>Age</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="">32</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Jim Green</td><td class="">40</td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right"><div class="ant-table-body-outer" style="-webkit-transform:translate3d (0, 0, 0)"><div class="ant-table-body-inner"><table class="ant-table-fixed"><colgroup><col style="width:100px;min-width:100px"/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>Action</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><a href="javascript:;">action</a></td></tr></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-fixed-columns">固定列</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/fixed-columns.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 <code>scroll.x</code> 配合使用。</p><blockquote><p>若列头与内容不对齐或出现列重复，请指定列的宽度 <code>width</code>。</p><p>建议指定 <code>scroll.x</code> 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 <code>scroll.x</code>。</p></blockquote></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;固定列 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Full Name'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> fixed<span class="token punctuation">:</span> <span class="token string">'left'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> fixed<span class="token punctuation">:</span> <span class="token string">'left'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 1'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 2'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'2'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 3'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'3'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 4'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'4'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 5'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'5'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 6'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'6'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 7'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'7'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 8'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'8'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span>
    key<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
    fixed<span class="token punctuation">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
    width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
    render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'New York Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
  address<span class="token punctuation">:</span> <span class="token string">'London Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">scroll</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">1300</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-columns-header"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-fixed-header ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-scroll"><div class="ant-table-header"><table class="ant-table-fixed" style="width:1500px"><colgroup><col style="width:100px;min-width:100px"/><col style="width:100px;min-width:100px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col/><col style="width:100px;min-width:100px"/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-fixed-columns-in-body"><div>Full Name</div></th><th class="ant-table-fixed-columns-in-body"><div>Age</div></th><th class=""><div>Column 1</div></th><th class=""><div>Column 2</div></th><th class=""><div>Column 3</div></th><th class=""><div>Column 4</div></th><th class=""><div>Column 5</div></th><th class=""><div>Column 6</div></th><th class=""><div>Column 7</div></th><th class=""><div>Column 8</div></th><th class="ant-table-fixed-columns-in-body"><div>Action</div></th></tr></thead></table></div><div class="ant-table-body" style="overflow-x:scroll;-webkit-transform:translate3d (0, 0, 0);max-height:300px;overflow-y:scroll"><table class="ant-table-fixed" style="width:1500px"><colgroup><col style="width:100px;min-width:100px"/><col style="width:100px;min-width:100px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col style="width:150px;min-width:150px"/><col/><col style="width:100px;min-width:100px"/></colgroup><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 0</td><td class="ant-table-fixed-columns-in-body">32</td><td class="">London Park no. 0</td><td class="">London Park no. 0</td><td class="">London Park no. 0</td><td class="">London Park no. 0</td><td class="">London Park no. 0</td><td class="">London Park no. 0</td><td class="">London Park no. 0</td><td class="">London Park no. 0</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 1</td><td class="ant-table-fixed-columns-in-body">32</td><td class="">London Park no. 1</td><td class="">London Park no. 1</td><td class="">London Park no. 1</td><td class="">London Park no. 1</td><td class="">London Park no. 1</td><td class="">London Park no. 1</td><td class="">London Park no. 1</td><td class="">London Park no. 1</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 2</td><td class="ant-table-fixed-columns-in-body">32</td><td class="">London Park no. 2</td><td class="">London Park no. 2</td><td class="">London Park no. 2</td><td class="">London Park no. 2</td><td class="">London Park no. 2</td><td class="">London Park no. 2</td><td class="">London Park no. 2</td><td class="">London Park no. 2</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 3</td><td class="ant-table-fixed-columns-in-body">32</td><td class="">London Park no. 3</td><td class="">London Park no. 3</td><td class="">London Park no. 3</td><td class="">London Park no. 3</td><td class="">London Park no. 3</td><td class="">London Park no. 3</td><td class="">London Park no. 3</td><td class="">London Park no. 3</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 4</td><td class="ant-table-fixed-columns-in-body">32</td><td class="">London Park no. 4</td><td class="">London Park no. 4</td><td class="">London Park no. 4</td><td class="">London Park no. 4</td><td class="">London Park no. 4</td><td class="">London Park no. 4</td><td class="">London Park no. 4</td><td class="">London Park no. 4</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="5"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 5</td><td class="ant-table-fixed-columns-in-body">32</td><td class="">London Park no. 5</td><td class="">London Park no. 5</td><td class="">London Park no. 5</td><td class="">London Park no. 5</td><td class="">London Park no. 5</td><td class="">London Park no. 5</td><td class="">London Park no. 5</td><td class="">London Park no. 5</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="6"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 6</td><td class="ant-table-fixed-columns-in-body">32</td><td class="">London Park no. 6</td><td class="">London Park no. 6</td><td class="">London Park no. 6</td><td class="">London Park no. 6</td><td class="">London Park no. 6</td><td class="">London Park no. 6</td><td class="">London Park no. 6</td><td class="">London Park no. 6</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="7"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 7</td><td class="ant-table-fixed-columns-in-body">32</td><td class="">London Park no. 7</td><td class="">London Park no. 7</td><td class="">London Park no. 7</td><td class="">London Park no. 7</td><td class="">London Park no. 7</td><td class="">London Park no. 7</td><td class="">London Park no. 7</td><td class="">London Park no. 7</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="8"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 8</td><td class="ant-table-fixed-columns-in-body">32</td><td class="">London Park no. 8</td><td class="">London Park no. 8</td><td class="">London Park no. 8</td><td class="">London Park no. 8</td><td class="">London Park no. 8</td><td class="">London Park no. 8</td><td class="">London Park no. 8</td><td class="">London Park no. 8</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="9"><td class="ant-table-fixed-columns-in-body"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 9</td><td class="ant-table-fixed-columns-in-body">32</td><td class="">London Park no. 9</td><td class="">London Park no. 9</td><td class="">London Park no. 9</td><td class="">London Park no. 9</td><td class="">London Park no. 9</td><td class="">London Park no. 9</td><td class="">London Park no. 9</td><td class="">London Park no. 9</td><td class="ant-table-fixed-columns-in-body"><a href="javascript:;">action</a></td></tr></tbody></table></div></div><div class="ant-table-fixed-left"><div class="ant-table-header"><table class="ant-table-fixed"><colgroup><col style="width:100px;min-width:100px"/><col style="width:100px;min-width:100px"/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>Full Name</div></th><th class=""><div>Age</div></th></tr></thead></table></div><div class="ant-table-body-outer" style="-webkit-transform:translate3d (0, 0, 0)"><div class="ant-table-body-inner" style="max-height:300px;overflow-y:scroll"><table class="ant-table-fixed"><colgroup><col style="width:100px;min-width:100px"/><col style="width:100px;min-width:100px"/></colgroup><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 0</td><td class="">32</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 1</td><td class="">32</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 2</td><td class="">32</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 3</td><td class="">32</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 4</td><td class="">32</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="5"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 5</td><td class="">32</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="6"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 6</td><td class="">32</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="7"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 7</td><td class="">32</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="8"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 8</td><td class="">32</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="9"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 9</td><td class="">32</td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right"><div class="ant-table-header"><table class="ant-table-fixed"><colgroup><col style="width:100px;min-width:100px"/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>Action</div></th></tr></thead></table></div><div class="ant-table-body-outer" style="-webkit-transform:translate3d (0, 0, 0)"><div class="ant-table-body-inner" style="max-height:300px;overflow-y:scroll"><table class="ant-table-fixed"><colgroup><col style="width:100px;min-width:100px"/></colgroup><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td class=""><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class=""><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class=""><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="5"><td class=""><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="6"><td class=""><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="7"><td class=""><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="8"><td class=""><a href="javascript:;">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="9"><td class=""><a href="javascript:;">action</a></td></tr></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" tabindex="0"><a>2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" tabindex="0"><a>3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" tabindex="0"><a>4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next" tabindex="0"><a>5</a></li><li title="向后 5 页" tabindex="0" class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"><a class="ant-pagination-item-link"><div class="ant-pagination-item-container"><i class="anticon anticon-double-right ant-pagination-item-link-icon"><svg viewBox="64 64 896 896" class="" data-icon="double-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 0 0 188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 0 0 492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path></svg></i><span class="ant-pagination-item-ellipsis">•••</span></div></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" tabindex="0"><a>10</a></li><li title="下一页" tabindex="0" class=" ant-pagination-next" aria-disabled="false"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-fixed-columns-header">固定头和列</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/fixed-columns-header.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>适合同时展示有大量数据和数据列。</p><blockquote><p>若列头与内容不对齐或出现列重复，请指定列的宽度 <code>width</code>。</p><p>建议指定 <code>scroll.x</code> 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 <code>scroll.x</code>。</p></blockquote></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;固定头和列 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Full Name'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> fixed<span class="token punctuation">:</span> <span class="token string">'left'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> fixed<span class="token punctuation">:</span> <span class="token string">'left'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 1'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 2'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 3'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 4'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 5'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'5'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 6'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'6'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 7'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'7'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 8'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'8'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span>
    key<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
    fixed<span class="token punctuation">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
    width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
    render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Edrward </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
    age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
    address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`London Park no. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">scroll</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">1500</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">300</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-grouping-columns"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-middle ant-table-bordered ant-table-fixed-header ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-scroll"><div class="ant-table-header"><table class="ant-table-fixed" style="width:130%"><colgroup><col style="width:100px;min-width:100px"/><col style="width:200px;min-width:200px"/><col style="width:200px;min-width:200px"/><col style="width:100px;min-width:100px"/><col style="width:100px;min-width:100px"/><col/><col/><col style="width:80px;min-width:80px"/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-fixed-columns-in-body ant-table-column-has-actions ant-table-column-has-filters" rowspan="4"><div>Name</div><i title="筛选" class="anticon anticon-filter ant-dropdown-trigger"><svg viewBox="64 64 896 896" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></i></th><th class="" colSpan="4"><div>Other</div></th><th class="" colSpan="2"><div>Company</div></th><th class="ant-table-fixed-columns-in-body" rowspan="4"><div>Gender</div></th></tr><tr><th class="ant-table-column-has-actions ant-table-column-has-sorters" rowspan="3"><div title="排序" class="ant-table-column-sorters">Age<div class="ant-table-column-sorter"><i class="anticon anticon-caret-up ant-table-column-sorter-up off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></i><i class="anticon anticon-caret-down ant-table-column-sorter-down off"><svg viewBox="0 0 1024 1024" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></div></div></th><th class="" colSpan="3"><div>Address</div></th><th class="" rowspan="3"><div>Company Address</div></th><th class="" rowspan="3"><div>Company Name</div></th></tr><tr><th class="" rowspan="2"><div>Street</div></th><th class="" colSpan="2"><div>Block</div></th></tr><tr><th class=""><div>Building</div></th><th class=""><div>Door No.</div></th></tr></thead></table></div><div class="ant-table-body" style="overflow-x:scroll;-webkit-transform:translate3d (0, 0, 0);max-height:240px;overflow-y:scroll"><table class="ant-table-fixed" style="width:130%"><colgroup><col style="width:100px;min-width:100px"/><col style="width:200px;min-width:200px"/><col style="width:200px;min-width:200px"/><col style="width:100px;min-width:100px"/><col style="width:100px;min-width:100px"/><col/><col/><col style="width:80px;min-width:80px"/></colgroup><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td class="ant-table-fixed-columns-in-body ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">1</td><td class="">Lake Park</td><td class="">C</td><td class="">2035</td><td class="">Lake Street 42</td><td class="">SoftLake Co</td><td class="ant-table-fixed-columns-in-body">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-fixed-columns-in-body ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">2</td><td class="">Lake Park</td><td class="">C</td><td class="">2035</td><td class="">Lake Street 42</td><td class="">SoftLake Co</td><td class="ant-table-fixed-columns-in-body">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-fixed-columns-in-body ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">3</td><td class="">Lake Park</td><td class="">C</td><td class="">2035</td><td class="">Lake Street 42</td><td class="">SoftLake Co</td><td class="ant-table-fixed-columns-in-body">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="ant-table-fixed-columns-in-body ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">4</td><td class="">Lake Park</td><td class="">C</td><td class="">2035</td><td class="">Lake Street 42</td><td class="">SoftLake Co</td><td class="ant-table-fixed-columns-in-body">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class="ant-table-fixed-columns-in-body ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">5</td><td class="">Lake Park</td><td class="">C</td><td class="">2035</td><td class="">Lake Street 42</td><td class="">SoftLake Co</td><td class="ant-table-fixed-columns-in-body">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="5"><td class="ant-table-fixed-columns-in-body ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">6</td><td class="">Lake Park</td><td class="">C</td><td class="">2035</td><td class="">Lake Street 42</td><td class="">SoftLake Co</td><td class="ant-table-fixed-columns-in-body">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="6"><td class="ant-table-fixed-columns-in-body ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">7</td><td class="">Lake Park</td><td class="">C</td><td class="">2035</td><td class="">Lake Street 42</td><td class="">SoftLake Co</td><td class="ant-table-fixed-columns-in-body">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="7"><td class="ant-table-fixed-columns-in-body ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">8</td><td class="">Lake Park</td><td class="">C</td><td class="">2035</td><td class="">Lake Street 42</td><td class="">SoftLake Co</td><td class="ant-table-fixed-columns-in-body">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="8"><td class="ant-table-fixed-columns-in-body ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">9</td><td class="">Lake Park</td><td class="">C</td><td class="">2035</td><td class="">Lake Street 42</td><td class="">SoftLake Co</td><td class="ant-table-fixed-columns-in-body">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="9"><td class="ant-table-fixed-columns-in-body ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td><td class="ant-table-column-has-actions ant-table-column-has-sorters">10</td><td class="">Lake Park</td><td class="">C</td><td class="">2035</td><td class="">Lake Street 42</td><td class="">SoftLake Co</td><td class="ant-table-fixed-columns-in-body">M</td></tr></tbody></table></div></div><div class="ant-table-fixed-left"><div class="ant-table-header"><table class="ant-table-fixed"><colgroup><col style="width:100px;min-width:100px"/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-column-has-actions ant-table-column-has-filters" rowspan="4"><div>Name</div><i title="筛选" class="anticon anticon-filter ant-dropdown-trigger"><svg viewBox="64 64 896 896" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></i></th></tr></thead></table></div><div class="ant-table-body-outer" style="-webkit-transform:translate3d (0, 0, 0)"><div class="ant-table-body-inner" style="max-height:240px;overflow-y:scroll"><table class="ant-table-fixed"><colgroup><col style="width:100px;min-width:100px"/></colgroup><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="5"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="6"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="7"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="8"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="9"><td class="ant-table-column-has-actions ant-table-column-has-filters"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>John Brown</td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right"><div class="ant-table-header"><table class="ant-table-fixed"><colgroup><col style="width:80px;min-width:80px"/></colgroup><thead class="ant-table-thead"><tr><th class="" rowspan="4"><div>Gender</div></th></tr></thead></table></div><div class="ant-table-body-outer" style="-webkit-transform:translate3d (0, 0, 0)"><div class="ant-table-body-inner" style="max-height:240px;overflow-y:scroll"><table class="ant-table-fixed"><colgroup><col style="width:80px;min-width:80px"/></colgroup><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td class="">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class="">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="5"><td class="">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="6"><td class="">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="7"><td class="">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="8"><td class="">M</td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="9"><td class="">M</td></tr></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" tabindex="0"><a>2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" tabindex="0"><a>3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" tabindex="0"><a>4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next" tabindex="0"><a>5</a></li><li title="向后 5 页" tabindex="0" class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"><a class="ant-pagination-item-link"><div class="ant-pagination-item-container"><i class="anticon anticon-double-right ant-pagination-item-link-icon"><svg viewBox="64 64 896 896" class="" data-icon="double-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 0 0 188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 0 0 492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path></svg></i><span class="ant-pagination-item-ellipsis">•••</span></div></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" tabindex="0"><a>10</a></li><li title="下一页" tabindex="0" class=" ant-pagination-next" aria-disabled="false"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-grouping-columns">表头分组</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/grouping-columns.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p><code>columns[n]</code> 可以内嵌 <code>children</code>，以渲染分组表头。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;表头分组 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESBDb9hmCZLNr9RuoA65CCpRSfloAAgAlIQxQsH5VEIByeSj4gG5ff0Dg8MjaABEAeQBZEJi4xJylVVT0gKDQ-LRGFgB6FggpZsbaFlNzar9arPiCZoNjXrh-3xCZ2bmHJ3GAC1oVKHc6W3UAHjaANxCIFgBebys6NAMYfjOQqQBPWFOQdBY28lxEEIAmABYUIxnAB821aED2QN82zgGH4EBQtEh5BmezQ_BCKlIAFdGAA5UhsELHELKDBYlS2Aj4WgAUVgFMYACF7gBJFgACniHku5Gu8QAlGlyKCYXCEUCHLogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
  fixed<span class="token punctuation">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
  filters<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    text<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span>
    value<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    text<span class="token punctuation">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span>
    value<span class="token punctuation">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Other'</span><span class="token punctuation">,</span>
  children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
    dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
    key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
    width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
    sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>age <span class="token operator">-</span> b<span class="token punctuation">.</span>age<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Street'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'street'</span><span class="token punctuation">,</span>
      key<span class="token punctuation">:</span> <span class="token string">'street'</span><span class="token punctuation">,</span>
      width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Block'</span><span class="token punctuation">,</span>
      children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        title<span class="token punctuation">:</span> <span class="token string">'Building'</span><span class="token punctuation">,</span>
        dataIndex<span class="token punctuation">:</span> <span class="token string">'building'</span><span class="token punctuation">,</span>
        key<span class="token punctuation">:</span> <span class="token string">'building'</span><span class="token punctuation">,</span>
        width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        title<span class="token punctuation">:</span> <span class="token string">'Door No.'</span><span class="token punctuation">,</span>
        dataIndex<span class="token punctuation">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span>
        key<span class="token punctuation">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span>
        width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Company'</span><span class="token punctuation">,</span>
  children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Company Address'</span><span class="token punctuation">,</span>
    dataIndex<span class="token punctuation">:</span> <span class="token string">'companyAddress'</span><span class="token punctuation">,</span>
    key<span class="token punctuation">:</span> <span class="token string">'companyAddress'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Company Name'</span><span class="token punctuation">,</span>
    dataIndex<span class="token punctuation">:</span> <span class="token string">'companyName'</span><span class="token punctuation">,</span>
    key<span class="token punctuation">:</span> <span class="token string">'companyName'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Gender'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'gender'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'gender'</span><span class="token punctuation">,</span>
  width<span class="token punctuation">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
  fixed<span class="token punctuation">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
    age<span class="token punctuation">:</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
    street<span class="token punctuation">:</span> <span class="token string">'Lake Park'</span><span class="token punctuation">,</span>
    building<span class="token punctuation">:</span> <span class="token string">'C'</span><span class="token punctuation">,</span>
    number<span class="token punctuation">:</span> <span class="token number">2035</span><span class="token punctuation">,</span>
    companyAddress<span class="token punctuation">:</span> <span class="token string">'Lake Street 42'</span><span class="token punctuation">,</span>
    companyName<span class="token punctuation">:</span> <span class="token string">'SoftLake Co'</span><span class="token punctuation">,</span>
    gender<span class="token punctuation">:</span> <span class="token string">'M'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
    <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
    <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
    <span class="token attr-name">bordered</span>
    <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span>
    <span class="token attr-name">scroll</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token string">'130%'</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">240</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
  <span class="token punctuation">/></span></span><span class="token punctuation">,</span>
  mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-edit-cell"><section class="code-box-demo"><div><button style="margin-bottom:16px" type="button" class="ant-btn ant-btn-primary"><span>Add a row</span></button><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-bordered ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col style="width:30%;min-width:30%"/><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>name</div></th><th class=""><div>age</div></th><th class=""><div>address</div></th><th class=""><div>operation</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="0"><td class=""><div class="editable-cell-value-wrap" style="padding-right:24px"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 0</div></td><td class="">32</td><td class="">London, Park Lane no. 0</td><td class=""><a href="javascript:;">Delete</a></td></tr><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="1"><td class=""><div class="editable-cell-value-wrap" style="padding-right:24px"><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edward King 1</div></td><td class="">32</td><td class="">London, Park Lane no. 1</td><td class=""><a href="javascript:;">Delete</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></div><style>.editable-cell {
  position: relative;
}

.editable-cell-value-wrap {
  padding: 5px 12px;
  cursor: pointer;
}

.editable-row:hover .editable-cell-value-wrap {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 4px 11px;
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-edit-cell">可编辑单元格</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/edit-cell.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>带单元格编辑功能的表格。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;可编辑单元格 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n.editable-cell {\n  position: relative;\n}\n\n.editable-cell-value-wrap {\n  padding: 5px 12px;\n  cursor: pointer;\n}\n\n.editable-row:hover .editable-cell-value-wrap {\n  border: 1px solid #d9d9d9;\n  border-radius: 4px;\n  padding: 4px 11px;\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESAIwWEWmgBGsBRhhQoAAmAAOuS-viikcM4QFIi-guK0EABuMADcQdpBQQ5OLu4wnt5QColoUACu-QDu_Ggo_kEh6CxO5LgxAKwoRr4AjABMXWnBvhhl_GT8MWEG9PxDGeRZjs5uHvyklYgAFqTJ_L7ZK3kFPsWlFQrVtfXDrqT8bJO9Xb5kUBAsvgDELACcf38hiE7g8YPwFDUnGU4DEACyDBqhNDNAxtXzw7o9HoI8jaEDafSGGAmEjMaz0RjqIIQFRhfi0XwAJSEGAZYHWKl8AHJ5KyuUMaXSGczhAARADyAFlfOzVNzebQlKp-dTafcGVy0IwWAB6JxSHVa2gsUzmFXkQXq7kEHUGYymuDmxEhF0u_GE-1bWgqKBkui2dQAHiciV8HwAvAErHQ0AYwVHXrQAJ6wSMgJotNF9DFRgB8gb1SVzQUDcAw_AgKFoxeGJX2KlIZUYADlSGxfOHfMpRipbAR8LQAKKwXuMABCSYAkiwABRc8mx8hgrkASiGBbLFarufxuiAA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Popconfirm<span class="token punctuation">,</span> Form <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
<span class="token keyword">const</span> EditableContext <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> EditableRow <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> form<span class="token punctuation">,</span> index<span class="token punctuation">,</span> <span class="token operator">...</span>props <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditableContext.Provider</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>form<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
    <span class="token operator">&lt;</span>tr <span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>EditableContext.Provider</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> EditableFormRow <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>EditableRow<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">EditableCell</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    editing<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>

  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>editable<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>handleClickOutside<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>editable<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      document<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>handleClickOutside<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  toggleEdit <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> editing <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>editing<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> editing <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>editing<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>input<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleClickOutside <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> editing <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>editing <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cell <span class="token operator">!==</span> e<span class="token punctuation">.</span>target <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>cell<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  save <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> record<span class="token punctuation">,</span> handleSave <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span>error<span class="token punctuation">,</span> values<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">toggleEdit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token function">handleSave</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>record<span class="token punctuation">,</span> <span class="token operator">...</span>values <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> editing <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>
      editable<span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">,</span>
      title<span class="token punctuation">,</span>
      record<span class="token punctuation">,</span>
      index<span class="token punctuation">,</span>
      handleSave<span class="token punctuation">,</span>
      <span class="token operator">...</span>restProps
    <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>node <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>cell <span class="token operator">=</span> node<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">{...restProps}</span><span class="token punctuation">></span></span>
        <span class="token punctuation">{</span>editable <span class="token operator">?</span> <span class="token punctuation">(</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditableContext.Consumer</span><span class="token punctuation">></span></span>
            <span class="token punctuation">{</span><span class="token punctuation">(</span>form<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>form <span class="token operator">=</span> form<span class="token punctuation">;</span>
              <span class="token keyword">return</span> <span class="token punctuation">(</span>
                editing <span class="token operator">?</span> <span class="token punctuation">(</span>
                  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> margin<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
                    <span class="token punctuation">{</span>form<span class="token punctuation">.</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span>dataIndex<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                      rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                        required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                        message<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is required.`</span></span><span class="token punctuation">,</span>
                      <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                      initialValue<span class="token punctuation">:</span> record<span class="token punctuation">[</span>dataIndex<span class="token punctuation">]</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
                      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Input</span>
                        <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>node <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>input <span class="token operator">=</span> node<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
                        <span class="token attr-name">onPressEnter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>save<span class="token punctuation">}</span></span>
                      <span class="token punctuation">/></span></span>
                    <span class="token punctuation">)</span><span class="token punctuation">}</span>
                  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
                <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>
                  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
                    <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editable-cell-value-wrap<span class="token punctuation">"</span></span>
                    <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> paddingRight<span class="token punctuation">:</span> <span class="token number">24</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
                    <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>toggleEdit<span class="token punctuation">}</span></span>
                  <span class="token punctuation">></span></span>
                    <span class="token punctuation">{</span>restProps<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
                  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
                <span class="token punctuation">)</span>
              <span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>EditableContext.Consumer</span><span class="token punctuation">></span></span>
        <span class="token punctuation">)</span> <span class="token punctuation">:</span> restProps<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">EditableTable</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
      width<span class="token punctuation">:</span> <span class="token string">'30%'</span><span class="token punctuation">,</span>
      editable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
      render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span>length <span class="token operator">>=</span> <span class="token number">1</span>
            <span class="token operator">?</span> <span class="token punctuation">(</span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Popconfirm</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Sure</span> <span class="token attr-name">to</span> <span class="token attr-name">delete?"</span> <span class="token attr-name">onConfirm</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleDelete</span><span class="token punctuation">(</span>record<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Popconfirm</span><span class="token punctuation">></span></span>
            <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">null</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
      dataSource<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        key<span class="token punctuation">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
        name<span class="token punctuation">:</span> <span class="token string">'Edward King 0'</span><span class="token punctuation">,</span>
        age<span class="token punctuation">:</span> <span class="token string">'32'</span><span class="token punctuation">,</span>
        address<span class="token punctuation">:</span> <span class="token string">'London, Park Lane no. 0'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
        name<span class="token punctuation">:</span> <span class="token string">'Edward King 1'</span><span class="token punctuation">,</span>
        age<span class="token punctuation">:</span> <span class="token string">'32'</span><span class="token punctuation">,</span>
        address<span class="token punctuation">:</span> <span class="token string">'London, Park Lane no. 1'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      count<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleDelete <span class="token operator">=</span> <span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> dataSource<span class="token punctuation">:</span> dataSource<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> item<span class="token punctuation">.</span>key <span class="token operator">!==</span> key<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleAdd <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> dataSource <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">const</span> newData <span class="token operator">=</span> <span class="token punctuation">{</span>
      key<span class="token punctuation">:</span> count<span class="token punctuation">,</span>
      name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Edward King </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
      age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
      address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`London, Park Lane no. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      dataSource<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>dataSource<span class="token punctuation">,</span> newData<span class="token punctuation">]</span><span class="token punctuation">,</span>
      count<span class="token punctuation">:</span> count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleSave <span class="token operator">=</span> <span class="token punctuation">(</span>row<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> newData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> index <span class="token operator">=</span> newData<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> row<span class="token punctuation">.</span>key <span class="token operator">===</span> item<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> item <span class="token operator">=</span> newData<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">;</span>
    newData<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token operator">...</span>item<span class="token punctuation">,</span>
      <span class="token operator">...</span>row<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> dataSource<span class="token punctuation">:</span> newData <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> dataSource <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">const</span> components <span class="token operator">=</span> <span class="token punctuation">{</span>
      body<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        row<span class="token punctuation">:</span> EditableFormRow<span class="token punctuation">,</span>
        cell<span class="token punctuation">:</span> EditableCell<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>columns<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>col<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>col<span class="token punctuation">.</span>editable<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> col<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token operator">...</span>col<span class="token punctuation">,</span>
        onCell<span class="token punctuation">:</span> record <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          record<span class="token punctuation">,</span>
          editable<span class="token punctuation">:</span> col<span class="token punctuation">.</span>editable<span class="token punctuation">,</span>
          dataIndex<span class="token punctuation">:</span> col<span class="token punctuation">.</span>dataIndex<span class="token punctuation">,</span>
          title<span class="token punctuation">:</span> col<span class="token punctuation">.</span>title<span class="token punctuation">,</span>
          handleSave<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>handleSave<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleAdd<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginBottom<span class="token punctuation">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
          Add a row
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
          <span class="token attr-name">components</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>components<span class="token punctuation">}</span></span>
          <span class="token attr-name">rowClassName</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'editable-row'</span><span class="token punctuation">}</span></span>
          <span class="token attr-name">bordered</span>
          <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dataSource<span class="token punctuation">}</span></span>
          <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
        <span class="token punctuation">/></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditableTable</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token selector"><span class="token class">.editable-cell</span> </span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.editable-cell-value-wrap</span> </span><span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">5</span>px <span class="token number">12</span>px<span class="token punctuation">;</span>
  <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.editable-row</span><span class="token pseudo-class">:hover</span> <span class="token class">.editable-cell-value-wrap</span> </span><span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#d9d9d9</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">4</span>px <span class="token number">11</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-edit-row"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-bordered ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col style="width:25%;min-width:25%"/><col style="width:15%;min-width:15%"/><col style="width:40%;min-width:40%"/><col/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>name</div></th><th class=""><div>age</div></th><th class=""><div>address</div></th><th class=""><div>operation</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="0"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 0</td><td class="">32</td><td class="">London Park no. 0</td><td class=""><div><a>Edit</a></div></td></tr><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="1"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 1</td><td class="">32</td><td class="">London Park no. 1</td><td class=""><div><a>Edit</a></div></td></tr><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="2"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 2</td><td class="">32</td><td class="">London Park no. 2</td><td class=""><div><a>Edit</a></div></td></tr><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="3"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 3</td><td class="">32</td><td class="">London Park no. 3</td><td class=""><div><a>Edit</a></div></td></tr><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="4"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 4</td><td class="">32</td><td class="">London Park no. 4</td><td class=""><div><a>Edit</a></div></td></tr><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="5"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 5</td><td class="">32</td><td class="">London Park no. 5</td><td class=""><div><a>Edit</a></div></td></tr><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="6"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 6</td><td class="">32</td><td class="">London Park no. 6</td><td class=""><div><a>Edit</a></div></td></tr><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="7"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 7</td><td class="">32</td><td class="">London Park no. 7</td><td class=""><div><a>Edit</a></div></td></tr><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="8"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 8</td><td class="">32</td><td class="">London Park no. 8</td><td class=""><div><a>Edit</a></div></td></tr><tr class="ant-table-row editable-row ant-table-row-level-0" data-row-key="9"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>Edrward 9</td><td class="">32</td><td class="">London Park no. 9</td><td class=""><div><a>Edit</a></div></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" tabindex="0"><a>2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" tabindex="0"><a>3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" tabindex="0"><a>4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next" tabindex="0"><a>5</a></li><li title="向后 5 页" tabindex="0" class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"><a class="ant-pagination-item-link"><div class="ant-pagination-item-container"><i class="anticon anticon-double-right ant-pagination-item-link-icon"><svg viewBox="64 64 896 896" class="" data-icon="double-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 0 0 188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 0 0 492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path></svg></i><span class="ant-pagination-item-ellipsis">•••</span></div></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" tabindex="0"><a>10</a></li><li title="下一页" tabindex="0" class=" ant-pagination-next" aria-disabled="false"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div><style>.editable-row .ant-form-explain {
  position: absolute;
  font-size: 12px;
  margin-top: -4px;
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-edit-row">可编辑行</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/edit-row.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>带行编辑功能的表格。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;可编辑行 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n.editable-row .ant-form-explain {\n  position: absolute;\n  font-size: 12px;\n  margin-top: -4px;\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESAIwWEWmgBGsBf1IB3AAQE0RgUwUn4VBRgjFHEDX2AAHXJfXxRSOGcICkRfNzIoAFd6AG5E5JCg9IAvGGyARgAmFCMSpN8VNH5cAwVaUhRshQAWJpbtEG19Q0jiC2o6W3VEiBVU_lpfACUhDHWwLxVfAHJ5HcOW5dX1reEAEQB5AFlfPdUjk9olVTOlldD1w8CtBYAHonFJgYCWKZzN9yBc_kcCMCDMZoXBYaVkljseNJqiABa0FRQZjWeiMdQAHicADdfBAWABeeJWOhoAwwfgs3xSACesGZIHQLCc5Fw2XqwyMLIAfJTQRAaTLEpS4Bh-BAULRla0aR02qR8owAHKkNi-Rm-ZQYfIqWwEfC0ACisDtjAAQryAJIsAAUhzJ7PInMOAEoWvK1RqtTLxrogA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> InputNumber<span class="token punctuation">,</span> Popconfirm<span class="token punctuation">,</span> Form <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> i<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Edrward </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
    age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
    address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`London Park no. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
<span class="token keyword">const</span> EditableContext <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> EditableRow <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> form<span class="token punctuation">,</span> index<span class="token punctuation">,</span> <span class="token operator">...</span>props <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditableContext.Provider</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>form<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
    <span class="token operator">&lt;</span>tr <span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>EditableContext.Provider</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> EditableFormRow <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>EditableRow<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">EditableCell</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  getInput <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>inputType <span class="token operator">===</span> <span class="token string">'number'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>InputNumber</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Input</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>
      editing<span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">,</span>
      title<span class="token punctuation">,</span>
      inputType<span class="token punctuation">,</span>
      record<span class="token punctuation">,</span>
      index<span class="token punctuation">,</span>
      <span class="token operator">...</span>restProps
    <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditableContext.Consumer</span><span class="token punctuation">></span></span>
        <span class="token punctuation">{</span><span class="token punctuation">(</span>form<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> <span class="token punctuation">{</span> getFieldDecorator <span class="token punctuation">}</span> <span class="token operator">=</span> form<span class="token punctuation">;</span>
          <span class="token keyword">return</span> <span class="token punctuation">(</span>
            <span class="token operator">&lt;</span>td <span class="token punctuation">{</span><span class="token operator">...</span>restProps<span class="token punctuation">}</span><span class="token operator">></span>
              <span class="token punctuation">{</span>editing <span class="token operator">?</span> <span class="token punctuation">(</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> margin<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
                  <span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span>dataIndex<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                      required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                      message<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Please Input </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!`</span></span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                    initialValue<span class="token punctuation">:</span> record<span class="token punctuation">[</span>dataIndex<span class="token punctuation">]</span><span class="token punctuation">,</span>
                  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
              <span class="token punctuation">)</span> <span class="token punctuation">:</span> restProps<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
          <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>EditableContext.Consumer</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">EditableTable</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> data<span class="token punctuation">,</span> editingKey<span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>columns <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        title<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
        dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
        width<span class="token punctuation">:</span> <span class="token string">'25%'</span><span class="token punctuation">,</span>
        editable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        title<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
        dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
        width<span class="token punctuation">:</span> <span class="token string">'15%'</span><span class="token punctuation">,</span>
        editable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        title<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
        dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
        width<span class="token punctuation">:</span> <span class="token string">'40%'</span><span class="token punctuation">,</span>
        editable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        title<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
        dataIndex<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
        render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> editable <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">isEditing</span><span class="token punctuation">(</span>record<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token keyword">return</span> <span class="token punctuation">(</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
              <span class="token punctuation">{</span>editable <span class="token operator">?</span> <span class="token punctuation">(</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
                  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditableContext.Consumer</span><span class="token punctuation">></span></span>
                    <span class="token punctuation">{</span>form <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
                      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span>
                        <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span>
                        <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span>form<span class="token punctuation">,</span> record<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
                        <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginRight<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
                      <span class="token punctuation">></span></span>
                        Save
                      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
                    <span class="token punctuation">)</span><span class="token punctuation">}</span>
                  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>EditableContext.Consumer</span><span class="token punctuation">></span></span>
                  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Popconfirm</span>
                    <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Sure</span> <span class="token attr-name">to</span> <span class="token attr-name">cancel?"</span>
                    <span class="token attr-name">onConfirm</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">cancel</span><span class="token punctuation">(</span>record<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
                  <span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span><span class="token punctuation">></span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
                  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Popconfirm</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
              <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">edit</span><span class="token punctuation">(</span>record<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Edit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
              <span class="token punctuation">)</span><span class="token punctuation">}</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
          <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  isEditing <span class="token operator">=</span> <span class="token punctuation">(</span>record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> record<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>editingKey<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token function">edit</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> editingKey<span class="token punctuation">:</span> key <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">save</span><span class="token punctuation">(</span>form<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span>error<span class="token punctuation">,</span> row<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">const</span> newData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> index <span class="token operator">=</span> newData<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> key <span class="token operator">===</span> item<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> item <span class="token operator">=</span> newData<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">;</span>
        newData<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
          <span class="token operator">...</span>item<span class="token punctuation">,</span>
          <span class="token operator">...</span>row<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data<span class="token punctuation">:</span> newData<span class="token punctuation">,</span> editingKey<span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        newData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>row<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data<span class="token punctuation">:</span> newData<span class="token punctuation">,</span> editingKey<span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  cancel <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> editingKey<span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> components <span class="token operator">=</span> <span class="token punctuation">{</span>
      body<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        row<span class="token punctuation">:</span> EditableFormRow<span class="token punctuation">,</span>
        cell<span class="token punctuation">:</span> EditableCell<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>columns<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>col<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>col<span class="token punctuation">.</span>editable<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> col<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token operator">...</span>col<span class="token punctuation">,</span>
        onCell<span class="token punctuation">:</span> record <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          record<span class="token punctuation">,</span>
          inputType<span class="token punctuation">:</span> col<span class="token punctuation">.</span>dataIndex <span class="token operator">===</span> <span class="token string">'age'</span> <span class="token operator">?</span> <span class="token string">'number'</span> <span class="token punctuation">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
          dataIndex<span class="token punctuation">:</span> col<span class="token punctuation">.</span>dataIndex<span class="token punctuation">,</span>
          title<span class="token punctuation">:</span> col<span class="token punctuation">.</span>title<span class="token punctuation">,</span>
          editing<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">isEditing</span><span class="token punctuation">(</span>record<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
        <span class="token attr-name">components</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>components<span class="token punctuation">}</span></span>
        <span class="token attr-name">bordered</span>
        <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
        <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
        <span class="token attr-name">rowClassName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editable-row<span class="token punctuation">"</span></span>
      <span class="token punctuation">/></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditableTable</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token selector"><span class="token class">.editable-row</span> <span class="token class">.ant-form-explain</span> </span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> -<span class="token number">4</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-nested-table"><section class="code-box-demo"><div class="ant-table-wrapper components-table-demo-nested"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col class="ant-table-expand-icon-col"/><col/><col/><col/><col/><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-expand-icon-th" title="" rowspan="1"></th><th class=""><div>Name</div></th><th class=""><div>Platform</div></th><th class=""><div>Version</div></th><th class=""><div>Upgraded</div></th><th class=""><div>Creator</div></th><th class=""><div>Date</div></th><th class=""><div>Action</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="">Screem</td><td class="">iOS</td><td class="">10.3.4.5654</td><td class="">500</td><td class="">Jack</td><td class="">2014-12-24 23:12:00</td><td class=""><a href="javascript:;">Publish</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="">Screem</td><td class="">iOS</td><td class="">10.3.4.5654</td><td class="">500</td><td class="">Jack</td><td class="">2014-12-24 23:12:00</td><td class=""><a href="javascript:;">Publish</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="">Screem</td><td class="">iOS</td><td class="">10.3.4.5654</td><td class="">500</td><td class="">Jack</td><td class="">2014-12-24 23:12:00</td><td class=""><a href="javascript:;">Publish</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div><style>.components-table-demo-nested .ant-table-expanded-row > td:last-child {
  padding: 0 48px 0 8px;
}

.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th {
  border-bottom: 1px solid #e9e9e9;
}

.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th:first-child {
  padding-left: 0;
}

.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-row td:first-child {
  padding-left: 0;
}

.components-table-demo-nested .ant-table-expanded-row .ant-table-row:last-child td {
  border: none;
}

.components-table-demo-nested .ant-table-expanded-row .ant-table-thead > tr > th {
  background: none;
}

.components-table-demo-nested .table-operation a:not(:last-child) {
  margin-right: 24px;
}

.components-table-demo-nested .ant-table-expanded-row:hover > td {
  background: #fbfbfb;
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-nested-table">嵌套子表格</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/nested-table.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>展示每行数据更详细的信息。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;嵌套子表格 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n.components-table-demo-nested .ant-table-expanded-row &gt; td:last-child {\n  padding: 0 48px 0 8px;\n}\n\n.components-table-demo-nested .ant-table-expanded-row &gt; td:last-child .ant-table-thead th {\n  border-bottom: 1px solid #e9e9e9;\n}\n\n.components-table-demo-nested .ant-table-expanded-row &gt; td:last-child .ant-table-thead th:first-child {\n  padding-left: 0;\n}\n\n.components-table-demo-nested .ant-table-expanded-row &gt; td:last-child .ant-table-row td:first-child {\n  padding-left: 0;\n}\n\n.components-table-demo-nested .ant-table-expanded-row .ant-table-row:last-child td {\n  border: none;\n}\n\n.components-table-demo-nested .ant-table-expanded-row .ant-table-thead &gt; tr &gt; th {\n  background: none;\n}\n\n.components-table-demo-nested .table-operation a:not(:last-child) {\n  margin-right: 24px;\n}\n\n.components-table-demo-nested .ant-table-expanded-row:hover &gt; td {\n  background: #fbfbfb;\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESFOqUFW3AW00AI1hKYK0gvItGBYAAgI0RjdPbxgjdENghX5SAHcQgD4Q2hZEcSkFDAALaFDgAB1yEJD0FhYDXEQQgAYQgBYADhQjZpDOowBuCu0KiocVJ0DGV3cvGB8_AKDQ8MiZmLiIthYk1IysnLzaAuKoZYijtbnaQqFQ65DyypCPUn42fgUX2lpVRoBGLohMhQCChADEMAAnFCoYNyMNyKMaONnFMorN5v5AlJgmFzuj1vEtjs0plsrk0PkiiU8atolcbmg7oVEJB-FSTqUKlUanVyLgFLAwLRGk04QikY5UbRpvTMYscWc6RjYkTEslSfsKRyaSsLnKNVq2TrTg9udUmXyBUKRc1xSNyGMJi4CXM2AtsfQlfqVRsEttDXrXSTtUdqabsmani83jB-I1yM57YjHcjnWjLvLPbig5nVZt1btc3Lrrc9rR-OXClGqh5MFhcMkAK6GBNJoYOp3S2UY91YpZhTOkDj8CQQCghNCIRO0AAUoeOJQAlDWQio0PxcAYkhBcIVbQAmVpdZOSlGTGXBvsKr20n2EgsB1KIQqkABucfLXOj9cbpBbOQhGCYAeCBIHiiA2j6AkJgkMw1j0Iw6gVBAKL8LQIQAEpCBgGFgMkKghAA5PIuFEXCqFOOhWE4bQAAiADyACyIT4aoxGkUcygqORKFoRhRHnCwAD0dRSMJQmmOYvHkJRrwCQQwkGMYUlwDJ5pVJpmmQdBKn7ioUDwXQtjqAAPHUb4hKCAC8ZRWHQaAGHGdlArQACesC2SAvL1I0R5dHZ6SmaJEBvukFSmXAGD8BAKC0OFTxvhua7_owABypBsCE1khMoGBNiotgEPgtAAKKwIVjAAEJuQAkiws5EQhjmBPwRFLnCwVRTFcXpJBuhAA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Badge<span class="token punctuation">,</span> Menu<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> menu <span class="token operator">=</span> <span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu.Item</span><span class="token punctuation">></span></span>
      Action <span class="token number">1</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu.Item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu.Item</span><span class="token punctuation">></span></span>
      Action <span class="token number">2</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu.Item</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">NestedTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> expandedRowRender <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Date'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'date'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'date'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Status'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'state'</span><span class="token punctuation">,</span> render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Badge</span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Finished<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Upgrade Status'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'upgradeNum'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'upgradeNum'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span>
        dataIndex<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
        key<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
        render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>table-operation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Pause<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Stop<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">overlay</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>menu<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                More <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
        date<span class="token punctuation">:</span> <span class="token string">'2014-12-24 23:12:00'</span><span class="token punctuation">,</span>
        name<span class="token punctuation">:</span> <span class="token string">'This is production name'</span><span class="token punctuation">,</span>
        upgradeNum<span class="token punctuation">:</span> <span class="token string">'Upgraded: 56'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
        <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
        <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
        <span class="token attr-name">pagination</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>
      <span class="token punctuation">/></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Platform'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'platform'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'platform'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Version'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'version'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'version'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Upgraded'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'upgradeNum'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'upgradeNum'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Creator'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'creator'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'creator'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Date'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'createdAt'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'createdAt'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span> render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Publish<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
      name<span class="token punctuation">:</span> <span class="token string">'Screem'</span><span class="token punctuation">,</span>
      platform<span class="token punctuation">:</span> <span class="token string">'iOS'</span><span class="token punctuation">,</span>
      version<span class="token punctuation">:</span> <span class="token string">'10.3.4.5654'</span><span class="token punctuation">,</span>
      upgradeNum<span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
      creator<span class="token punctuation">:</span> <span class="token string">'Jack'</span><span class="token punctuation">,</span>
      createdAt<span class="token punctuation">:</span> <span class="token string">'2014-12-24 23:12:00'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
      <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>components-table-demo-nested<span class="token punctuation">"</span></span>
      <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
      <span class="token attr-name">expandedRowRender</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>expandedRowRender<span class="token punctuation">}</span></span>
      <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
    <span class="token punctuation">/></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NestedTable</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> > td<span class="token pseudo-class">:last-child</span> </span><span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">48</span>px <span class="token number">0</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> > td<span class="token pseudo-class">:last-child</span> <span class="token class">.ant-table-thead</span> th </span><span class="token punctuation">{</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> > td<span class="token pseudo-class">:last-child</span> <span class="token class">.ant-table-thead</span> th<span class="token pseudo-class">:first-child</span> </span><span class="token punctuation">{</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> > td<span class="token pseudo-class">:last-child</span> <span class="token class">.ant-table-row</span> td<span class="token pseudo-class">:first-child</span> </span><span class="token punctuation">{</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> <span class="token class">.ant-table-row</span><span class="token pseudo-class">:last-child</span> td </span><span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> <span class="token class">.ant-table-thead</span> > tr > th </span><span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.table-operation</span> a<span class="token pseudo-class">:not(:last-child)</span> </span><span class="token punctuation">{</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span><span class="token pseudo-class">:hover</span> > td </span><span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fbfbfb</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-drag-sorting"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col/><col/><col/></colgroup><thead class="ant-table-thead"><tr><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class=""><div>Address</div></th></tr></thead><tbody class="ant-table-tbody"></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div><style>#components-table-demo-drag-sorting tr.drop-over-downward td {
  border-bottom: 2px dashed #1890ff;
}

#components-table-demo-drag-sorting tr.drop-over-upward td {
  border-top: 2px dashed #1890ff;
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-drag-sorting">拖拽排序</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/drag-sorting.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>使用自定义元素，我们可以集成 react-dnd 来实现拖拽排序。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;拖拽排序 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\ntr.drop-over-downward td {\n  border-bottom: 2px dashed #1890ff;\n}\n\ntr.drop-over-upward td {\n  border-top: 2px dashed #1890ff;\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESFr8CLfqRQLSANxj8lpAO7kfmj8LAAEtGHAADrkoaEARqQh3gqJtLSqiKEATChGoSxocAAWMGEAxACMABwAnAAMYGAA3DHaMTEOTi5unikArihBIeGRMXGJyT4ZKFm5-YUlZaFVdY0tbSDa-oYwJiTM1vSM6jEQKihJtKEASkIY12AuKqEA5PIPr63k55f813dhAARADyAFlQk9VG8PrRfCovmcLlc3mhGCwAPQsCBSDFoiKmcyIn7I_5vAgYgzGQlwYnjOIMxlbHbU4q0FRQQ50WzqAA82I8oQgLAAvFErHQ0AZvOLQlIAJ6wMUgdAsbHkXBzAAseXFAD5eViIB49TFeXAMPwIChaKbYqEPMFQipSP1GAA5UhsUIigqkDD9FS2Aj4WgAUVgQcYACF5QBJFgACleRyl5G8rwAlN9DRarTa9VtdEA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> DragDropContext<span class="token punctuation">,</span> DragSource<span class="token punctuation">,</span> DropTarget <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-dnd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> HTML5Backend <span class="token keyword">from</span> <span class="token string">'react-dnd-html5-backend'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> update <span class="token keyword">from</span> <span class="token string">'immutability-helper'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">dragDirection</span><span class="token punctuation">(</span>
  dragIndex<span class="token punctuation">,</span>
  hoverIndex<span class="token punctuation">,</span>
  initialClientOffset<span class="token punctuation">,</span>
  clientOffset<span class="token punctuation">,</span>
  sourceClientOffset<span class="token punctuation">,</span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> hoverMiddleY <span class="token operator">=</span> <span class="token punctuation">(</span>initialClientOffset<span class="token punctuation">.</span>y <span class="token operator">-</span> sourceClientOffset<span class="token punctuation">.</span>y<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> hoverClientY <span class="token operator">=</span> clientOffset<span class="token punctuation">.</span>y <span class="token operator">-</span> sourceClientOffset<span class="token punctuation">.</span>y<span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>dragIndex <span class="token operator">&lt;</span> hoverIndex <span class="token operator">&amp;&amp;</span> hoverClientY <span class="token operator">></span> hoverMiddleY<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token string">'downward'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>dragIndex <span class="token operator">></span> hoverIndex <span class="token operator">&amp;&amp;</span> hoverClientY <span class="token operator">&lt;</span> hoverMiddleY<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token string">'upward'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">BodyRow</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>
      isOver<span class="token punctuation">,</span>
      connectDragSource<span class="token punctuation">,</span>
      connectDropTarget<span class="token punctuation">,</span>
      moveRow<span class="token punctuation">,</span>
      dragRow<span class="token punctuation">,</span>
      clientOffset<span class="token punctuation">,</span>
      sourceClientOffset<span class="token punctuation">,</span>
      initialClientOffset<span class="token punctuation">,</span>
      <span class="token operator">...</span>restProps
    <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>
    <span class="token keyword">const</span> style <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>restProps<span class="token punctuation">.</span>style<span class="token punctuation">,</span> cursor<span class="token punctuation">:</span> <span class="token string">'move'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">let</span> className <span class="token operator">=</span> restProps<span class="token punctuation">.</span>className<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>isOver <span class="token operator">&amp;&amp;</span> initialClientOffset<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> direction <span class="token operator">=</span> <span class="token function">dragDirection</span><span class="token punctuation">(</span>
        dragRow<span class="token punctuation">.</span>index<span class="token punctuation">,</span>
        restProps<span class="token punctuation">.</span>index<span class="token punctuation">,</span>
        initialClientOffset<span class="token punctuation">,</span>
        clientOffset<span class="token punctuation">,</span>
        sourceClientOffset
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>direction <span class="token operator">===</span> <span class="token string">'downward'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        className <span class="token operator">+</span><span class="token operator">=</span> <span class="token string">' drop-over-downward'</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>direction <span class="token operator">===</span> <span class="token string">'upward'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        className <span class="token operator">+</span><span class="token operator">=</span> <span class="token string">' drop-over-upward'</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">return</span> <span class="token function">connectDragSource</span><span class="token punctuation">(</span>
      <span class="token function">connectDropTarget</span><span class="token punctuation">(</span>
        <span class="token operator">&lt;</span>tr
          <span class="token punctuation">{</span><span class="token operator">...</span>restProps<span class="token punctuation">}</span>
          className<span class="token operator">=</span><span class="token punctuation">{</span>className<span class="token punctuation">}</span>
          style<span class="token operator">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span>
        <span class="token operator">/</span><span class="token operator">></span>
      <span class="token punctuation">)</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> rowSource <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">beginDrag</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      index<span class="token punctuation">:</span> props<span class="token punctuation">.</span>index<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> rowTarget <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">drop</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> monitor<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> dragIndex <span class="token operator">=</span> monitor<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>index<span class="token punctuation">;</span>
    <span class="token keyword">const</span> hoverIndex <span class="token operator">=</span> props<span class="token punctuation">.</span>index<span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">// Don't replace items with themselves</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>dragIndex <span class="token operator">===</span> hoverIndex<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment" spellcheck="true">// Time to actually perform the action</span>
    props<span class="token punctuation">.</span><span class="token function">moveRow</span><span class="token punctuation">(</span>dragIndex<span class="token punctuation">,</span> hoverIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">// Note: we're mutating the monitor item here!</span>
    <span class="token comment" spellcheck="true">// Generally it's better to avoid mutations,</span>
    <span class="token comment" spellcheck="true">// but it's good here for the sake of performance</span>
    <span class="token comment" spellcheck="true">// to avoid expensive index searches.</span>
    monitor<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>index <span class="token operator">=</span> hoverIndex<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> DragableBodyRow <span class="token operator">=</span> <span class="token function">DropTarget</span><span class="token punctuation">(</span><span class="token string">'row'</span><span class="token punctuation">,</span> rowTarget<span class="token punctuation">,</span> <span class="token punctuation">(</span>connect<span class="token punctuation">,</span> monitor<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  connectDropTarget<span class="token punctuation">:</span> connect<span class="token punctuation">.</span><span class="token function">dropTarget</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  isOver<span class="token punctuation">:</span> monitor<span class="token punctuation">.</span><span class="token function">isOver</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  sourceClientOffset<span class="token punctuation">:</span> monitor<span class="token punctuation">.</span><span class="token function">getSourceClientOffset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
  <span class="token function">DragSource</span><span class="token punctuation">(</span><span class="token string">'row'</span><span class="token punctuation">,</span> rowSource<span class="token punctuation">,</span> <span class="token punctuation">(</span>connect<span class="token punctuation">,</span> monitor<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
    connectDragSource<span class="token punctuation">:</span> connect<span class="token punctuation">.</span><span class="token function">dragSource</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    dragRow<span class="token punctuation">:</span> monitor<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    clientOffset<span class="token punctuation">:</span> monitor<span class="token punctuation">.</span><span class="token function">getClientOffset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    initialClientOffset<span class="token punctuation">:</span> monitor<span class="token punctuation">.</span><span class="token function">getInitialClientOffset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">(</span>BodyRow<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">DragSortingTable</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
      name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
      age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
      address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
      name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
      age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
      address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
      name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
      age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
      address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>

  components <span class="token operator">=</span> <span class="token punctuation">{</span>
    body<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      row<span class="token punctuation">:</span> DragableBodyRow<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>

  moveRow <span class="token operator">=</span> <span class="token punctuation">(</span>dragIndex<span class="token punctuation">,</span> hoverIndex<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">const</span> dragRow <span class="token operator">=</span> data<span class="token punctuation">[</span>dragIndex<span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>
      <span class="token function">update</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">,</span> <span class="token punctuation">{</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          $splice<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>dragIndex<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>hoverIndex<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> dragRow<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
        <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
        <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
        <span class="token attr-name">components</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>components<span class="token punctuation">}</span></span>
        <span class="token attr-name">onRow</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>record<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          index<span class="token punctuation">,</span>
          moveRow<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>moveRow<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
      <span class="token punctuation">/></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> Demo <span class="token operator">=</span> <span class="token function">DragDropContext</span><span class="token punctuation">(</span>HTML5Backend<span class="token punctuation">)</span><span class="token punctuation">(</span>DragSortingTable<span class="token punctuation">)</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token selector"><span class="token id">#components-table-demo-drag-sorting</span> tr<span class="token class">.drop-over-downward</span> td </span><span class="token punctuation">{</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">2</span>px dashed <span class="token hexcode">#1890ff</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token id">#components-table-demo-drag-sorting</span> tr<span class="token class">.drop-over-upward</span> td </span><span class="token punctuation">{</span>
  <span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">2</span>px dashed <span class="token hexcode">#1890ff</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-resizable-column"><section class="code-box-demo"><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-bordered ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col style="width:200px;min-width:200px"/><col style="width:100px;min-width:100px"/><col style="width:100px;min-width:100px"/><col style="width:100px;min-width:100px"/><col/></colgroup><thead class="ant-table-thead"><tr><th class="react-resizable"><div>Date</div><span class="react-resizable-handle" style="touch-action:none"></span></th><th class="react-resizable"><div>Amount</div><span class="react-resizable-handle" style="touch-action:none"></span></th><th class="react-resizable"><div>Type</div><span class="react-resizable-handle" style="touch-action:none"></span></th><th class="react-resizable"><div>Note</div><span class="react-resizable-handle" style="touch-action:none"></span></th><th class=""><div>Action</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>2018-02-11</td><td class="">120</td><td class="">income</td><td class="">transfer</td><td class=""><a href="javascript:;">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>2018-03-11</td><td class="">243</td><td class="">income</td><td class="">transfer</td><td class=""><a href="javascript:;">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class=""><span style="padding-left:0px" class="ant-table-row-indent indent-level-0"></span>2018-04-11</td><td class="">98</td><td class="">income</td><td class="">transfer</td><td class=""><a href="javascript:;">Delete</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div><style>#components-table-demo-resizable-column .react-resizable {
  position: relative;
}

#components-table-demo-resizable-column .react-resizable-handle {
  position: absolute;
  width: 10px;
  height: 100%;
  bottom: 0;
  right: -5px;
  cursor: col-resize;
}</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-resizable-column">可伸缩列</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/resizable-column.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>集成 react-resizable 来实现可伸缩列。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;可伸缩列 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n.react-resizable {\n  position: relative;\n}\n\n.react-resizable-handle {\n  position: absolute;\n  width: 10px;\n  height: 100%;\n  bottom: 0;\n  right: -5px;\n  cursor: col-resize;\n}&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESALyMtBYLgQAXmgBGsAATAAHXJfXxRSN1oICkRfQXFIgDcYAG4g7SCghyEnF3gPb1gFAAs0Qz9A4NDwiEjo328yKABXelTKgHcIFloimIBGAAYUIzaQopgIXCLafoGBgFJR3y9SWlpVGIGl_knpmIUAVmGljCb-Mn4Ymihct3cUtJBtfUMYExJma3pGdSCIFTC_FovgAStlgWB-KpfAByRy0GFtf6A4Fg4QAEQA8gBZXyQ6Fw8FKVSIv4A0hA2GlWgsAD0LAgUlp1JYpnMpPIyIpwJhBFpBmMbLgHKCITF4t8TxegumKignzotnUAB4GQlfF0ALwBKx0NAGGD8HW-KQAT1g2pA6BYDPIuBiACYACzDHUAPmV9IgCTdQWVcAwOxQtF9lQSaH4vhUpCajAAcqQ2L5Nb5lKcVLYCPhaABRWAZxgAIVNAEkWAAKGFffXkQ0wgCUbU9AaDIaeuiAA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Resizable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-resizable'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> ResizeableTitle <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> onResize<span class="token punctuation">,</span> width<span class="token punctuation">,</span> <span class="token operator">...</span>restProps <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">;</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>width<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">&lt;</span>th <span class="token punctuation">{</span><span class="token operator">...</span>restProps<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Resizable</span> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>width<span class="token punctuation">}</span></span> <span class="token attr-name">height</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span> <span class="token attr-name">onResize</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onResize<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
      <span class="token operator">&lt;</span>th <span class="token punctuation">{</span><span class="token operator">...</span>restProps<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Resizable</span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    columns<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Date'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'date'</span><span class="token punctuation">,</span>
      width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Amount'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'amount'</span><span class="token punctuation">,</span>
      width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Type'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'type'</span><span class="token punctuation">,</span>
      width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Note'</span><span class="token punctuation">,</span>
      dataIndex<span class="token punctuation">:</span> <span class="token string">'note'</span><span class="token punctuation">,</span>
      width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span>
      key<span class="token punctuation">:</span> <span class="token string">'action'</span><span class="token punctuation">,</span>
      render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  components <span class="token operator">=</span> <span class="token punctuation">{</span>
    header<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      cell<span class="token punctuation">:</span> ResizeableTitle<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    date<span class="token punctuation">:</span> <span class="token string">'2018-02-11'</span><span class="token punctuation">,</span>
    amount<span class="token punctuation">:</span> <span class="token number">120</span><span class="token punctuation">,</span>
    type<span class="token punctuation">:</span> <span class="token string">'income'</span><span class="token punctuation">,</span>
    note<span class="token punctuation">:</span> <span class="token string">'transfer'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    date<span class="token punctuation">:</span> <span class="token string">'2018-03-11'</span><span class="token punctuation">,</span>
    amount<span class="token punctuation">:</span> <span class="token number">243</span><span class="token punctuation">,</span>
    type<span class="token punctuation">:</span> <span class="token string">'income'</span><span class="token punctuation">,</span>
    note<span class="token punctuation">:</span> <span class="token string">'transfer'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    date<span class="token punctuation">:</span> <span class="token string">'2018-04-11'</span><span class="token punctuation">,</span>
    amount<span class="token punctuation">:</span> <span class="token number">98</span><span class="token punctuation">,</span>
    type<span class="token punctuation">:</span> <span class="token string">'income'</span><span class="token punctuation">,</span>
    note<span class="token punctuation">:</span> <span class="token string">'transfer'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  handleResize <span class="token operator">=</span> index <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>e<span class="token punctuation">,</span> <span class="token punctuation">{</span> size <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span> columns <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> nextColumns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>columns<span class="token punctuation">]</span><span class="token punctuation">;</span>
      nextColumns<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token operator">...</span>nextColumns<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">,</span>
        width<span class="token punctuation">:</span> size<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span> columns<span class="token punctuation">:</span> nextColumns <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>columns<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>col<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token operator">...</span>col<span class="token punctuation">,</span>
      onHeaderCell<span class="token punctuation">:</span> column <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
        width<span class="token punctuation">:</span> column<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
        onResize<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleResize</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
        <span class="token attr-name">bordered</span>
        <span class="token attr-name">components</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>components<span class="token punctuation">}</span></span>
        <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
        <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
      <span class="token punctuation">/></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight"><pre><code class="css"><span class="token selector"><span class="token id">#components-table-demo-resizable-column</span> <span class="token class">.react-resizable</span> </span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token id">#components-table-demo-resizable-column</span> <span class="token class">.react-resizable-handle</span> </span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> -<span class="token number">5</span>px<span class="token punctuation">;</span>
  <span class="token property">cursor</span><span class="token punctuation">:</span> col-resize<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-dynamic-settings"><section class="code-box-demo"><div><div class="components-table-demo-control-bar"><form class="ant-form ant-form-inline"><div class="ant-row ant-form-item"><div class="ant-form-item-label"><label class="" title="Bordered">Bordered</label></div><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" aria-checked="false" class="ant-switch"><span class="ant-switch-inner"></span></button></span></div></div></div><div class="ant-row ant-form-item"><div class="ant-form-item-label"><label class="" title="loading">loading</label></div><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" aria-checked="false" class="ant-switch"><span class="ant-switch-inner"></span></button></span></div></div></div><div class="ant-row ant-form-item"><div class="ant-form-item-label"><label class="" title="Title">Title</label></div><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" aria-checked="false" class="ant-switch"><span class="ant-switch-inner"></span></button></span></div></div></div><div class="ant-row ant-form-item"><div class="ant-form-item-label"><label class="" title="Column Header">Column Header</label></div><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control"><span class="ant-form-item-children"><button checked="" type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button></span></div></div></div><div class="ant-row ant-form-item"><div class="ant-form-item-label"><label class="" title="Footer">Footer</label></div><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control"><span class="ant-form-item-children"><button checked="" type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button></span></div></div></div><div class="ant-row ant-form-item"><div class="ant-form-item-label"><label class="" title="Expandable">Expandable</label></div><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control"><span class="ant-form-item-children"><button checked="" type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button></span></div></div></div><div class="ant-row ant-form-item"><div class="ant-form-item-label"><label class="" title="Checkbox">Checkbox</label></div><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control"><span class="ant-form-item-children"><button checked="" type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button></span></div></div></div><div class="ant-row ant-form-item"><div class="ant-form-item-label"><label class="" title="Fixed Header">Fixed Header</label></div><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" aria-checked="false" class="ant-switch"><span class="ant-switch-inner"></span></button></span></div></div></div><div class="ant-row ant-form-item"><div class="ant-form-item-label"><label class="" title="Has Data">Has Data</label></div><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control"><span class="ant-form-item-children"><button checked="" type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button></span></div></div></div><div class="ant-row ant-form-item"><div class="ant-form-item-label"><label class="" title="Size">Size</label></div><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" checked="" value="default"/><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="middle"/><span class="ant-radio-button-inner"></span></span><span>Middle</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"/><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div></span></div></div></div><div class="ant-row ant-form-item"><div class="ant-form-item-label"><label class="" title="Pagination">Pagination</label></div><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="top"/><span class="ant-radio-button-inner"></span></span><span>Top</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" checked="" value="bottom"/><span class="ant-radio-button-inner"></span></span><span>Bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="both"/><span class="ant-radio-button-inner"></span></span><span>Both</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="none"/><span class="ant-radio-button-inner"></span></span><span>None</span></label></div></span></div></div></div></form></div><div class="ant-table-wrapper"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left"><div class="ant-table-content"><div class="ant-table-body"><table class=""><colgroup><col class="ant-table-expand-icon-col"/><col/><col style="width:150px;min-width:150px"/><col style="width:70px;min-width:70px"/><col/><col style="width:360px;min-width:360px"/></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-expand-icon-th" title="" rowspan="1"></th><th class="ant-table-selection-column"><div><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></div></div></th><th class=""><div>Name</div></th><th class=""><div>Age</div></th><th class=""><div>Address</div></th><th class=""><div>Action</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><a href="javascript:;">John Brown</a></td><td class="">12</td><td class="">New York No. 1 Lake Park</td><td class=""><span><a href="javascript:;">Action 一 <!-- -->John Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;" class="ant-dropdown-link">More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="2"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><a href="javascript:;">John Brown</a></td><td class="">22</td><td class="">New York No. 2 Lake Park</td><td class=""><span><a href="javascript:;">Action 一 <!-- -->John Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;" class="ant-dropdown-link">More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="3"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><a href="javascript:;">John Brown</a></td><td class="">32</td><td class="">New York No. 3 Lake Park</td><td class=""><span><a href="javascript:;">Action 一 <!-- -->John Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;" class="ant-dropdown-link">More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="4"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><a href="javascript:;">John Brown</a></td><td class="">42</td><td class="">New York No. 4 Lake Park</td><td class=""><span><a href="javascript:;">Action 一 <!-- -->John Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;" class="ant-dropdown-link">More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="5"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><a href="javascript:;">John Brown</a></td><td class="">52</td><td class="">New York No. 5 Lake Park</td><td class=""><span><a href="javascript:;">Action 一 <!-- -->John Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;" class="ant-dropdown-link">More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="6"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><a href="javascript:;">John Brown</a></td><td class="">62</td><td class="">New York No. 6 Lake Park</td><td class=""><span><a href="javascript:;">Action 一 <!-- -->John Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;" class="ant-dropdown-link">More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="7"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><a href="javascript:;">John Brown</a></td><td class="">72</td><td class="">New York No. 7 Lake Park</td><td class=""><span><a href="javascript:;">Action 一 <!-- -->John Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;" class="ant-dropdown-link">More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="8"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><a href="javascript:;">John Brown</a></td><td class="">82</td><td class="">New York No. 8 Lake Park</td><td class=""><span><a href="javascript:;">Action 一 <!-- -->John Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;" class="ant-dropdown-link">More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="9"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><a href="javascript:;">John Brown</a></td><td class="">92</td><td class="">New York No. 9 Lake Park</td><td class=""><span><a href="javascript:;">Action 一 <!-- -->John Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;" class="ant-dropdown-link">More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-row-key="10"><td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td><td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"/><span class="ant-checkbox-inner"></span></span></label></span></td><td class=""><a href="javascript:;">John Brown</a></td><td class="">102</td><td class="">New York No. 10 Lake Park</td><td class=""><span><a href="javascript:;">Action 一 <!-- -->John Brown</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;">Delete</a><div class="ant-divider ant-divider-vertical"></div><a href="javascript:;" class="ant-dropdown-link">More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td></tr></tbody></table></div><div class="ant-table-footer">Here is footer</div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable"><li title="上一页" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" tabindex="0"><a>1</a></li><li title="下一页" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></li></ul></div></div></div></div><style>
.components-table-demo-control-bar {
  margin-bottom: 10px;
}
.components-table-demo-control-bar .ant-form-item {
  margin-right: 16px;
  margin-bottom: 8px;
}
</style></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-table-demo-dynamic-settings">动态控制表格属性</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/dynamic-settings.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></div><div><p>选择不同配置组合查看效果。</p></div><span class="code-expand-icon"><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="code-expand-icon-hide"/></span></section><section class="highlight-wrapper"><div class="highlight"><div class="code-box-actions"><form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value="{&quot;title&quot;:&quot;动态控制表格属性 - Ant Design Demo&quot;,&quot;html&quot;:&quot;&lt;div id=\&quot;container\&quot; style=\&quot;padding: 24px\&quot;&gt;&lt;/div&gt;\n&lt;script&gt;\n  var mountNode = document.getElementById(&#x27;container&#x27;);\n&lt;/script&gt;&quot;,&quot;js&quot;:&quot;&quot;,&quot;css&quot;:&quot;@import &#x27;antd/dist/antd.css&#x27;;\n\n\n.components-table-demo-control-bar {\n  margin-bottom: 10px;\n}\n.components-table-demo-control-bar .ant-form-item {\n  margin-right: 16px;\n  margin-bottom: 8px;\n}\n&quot;,&quot;editors&quot;:&quot;001&quot;,&quot;css_external&quot;:&quot;https://unpkg.com/antd/dist/antd.css&quot;,&quot;js_external&quot;:&quot;https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/moment/min/moment-with-locales.js;https://unpkg.com/antd/dist/antd-with-locales.js&quot;,&quot;js_pre_processor&quot;:&quot;typescript&quot;}"/><input type="submit" value="Create New Pen with Prefilled Data" class="code-box-codepen"/></form><form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPhMAvrtkRybAB4EMcBMhA1GDESAA65U6pQVbcBbTQAjWEpgqpArWtPykUAreaPwABMCOMTEq0bgGkaS0tKqIMQCMAAwoRgDcjtqOziqu5O6ePn5sgcF0YRFRsQRojApgpPwqChD0KnEJSSlp_BC4ABa0ObkAbEWl5InJ_Knk6ZnZMQAcK2WOINr6hjAmJMwhtuqOEFV9tDEASkIYL2BhIwDk8p9fqtHq5-C93sIACIAeQAsjFvqoYv8PrQlKogQ8nmDkV1aCwAPQsCBSAl4limcyY8gg57IggEgzGSlwaljRIcjmnc7MuYqKA3Oh3UQAHmJADcYhAWABeexWOhoAwwfjymJSACesDlIHQLGJ5FwOQATAAWIrygB8IqJEHFlscIrgGCmKFoDrWMXF0SSpAArowAHKkNgxGUxZQYP0qWwEfC0ACisBjjAAQhqAJIsAAUvxCSpq_F-AEpVjbna73addEA"/><input type="submit" value="Create New Sandbox with Prefilled Data" class="code-box-codesandbox"/></form><i class="anticon anticon-copy code-box-code-copy"><svg viewBox="64 64 896 896" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></div><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Icon<span class="token punctuation">,</span> Switch<span class="token punctuation">,</span> Radio<span class="token punctuation">,</span> Form<span class="token punctuation">,</span> Divider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> text <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
  width<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span>
  key<span class="token punctuation">:</span> <span class="token string">'action'</span><span class="token punctuation">,</span>
  width<span class="token punctuation">:</span> <span class="token number">360</span><span class="token punctuation">,</span>
  render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Action 一 <span class="token punctuation">{</span>record<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Divider</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Divider</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:;<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-dropdown-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        More actions <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
    age<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">2`</span></span><span class="token punctuation">,</span>
    address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`New York No. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> Lake Park`</span></span><span class="token punctuation">,</span>
    description<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`My name is John Brown, I am </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">2 years old, living in New York No. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> Lake Park.`</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> expandedRowRender <span class="token operator">=</span> record <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>record<span class="token punctuation">.</span>description<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> title <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'Here is title'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> showHeader <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> footer <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'Here is footer'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> scroll <span class="token operator">=</span> <span class="token punctuation">{</span> y<span class="token punctuation">:</span> <span class="token number">240</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> pagination <span class="token operator">=</span> <span class="token punctuation">{</span> position<span class="token punctuation">:</span> <span class="token string">'bottom'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    bordered<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    pagination<span class="token punctuation">,</span>
    size<span class="token punctuation">:</span> <span class="token string">'default'</span><span class="token punctuation">,</span>
    expandedRowRender<span class="token punctuation">,</span>
    title<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span>
    showHeader<span class="token punctuation">,</span>
    footer<span class="token punctuation">,</span>
    rowSelection<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    scroll<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span>
    hasData<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>

  handleToggle <span class="token operator">=</span> <span class="token punctuation">(</span>prop<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">:</span> enable <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleSizeChange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> size<span class="token punctuation">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleExpandChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> expandedRowRender<span class="token punctuation">:</span> enable <span class="token operator">?</span> expandedRowRender <span class="token punctuation">:</span> undefined <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleTitleChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> enable <span class="token operator">?</span> title <span class="token punctuation">:</span> undefined <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleHeaderChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> showHeader<span class="token punctuation">:</span> enable <span class="token operator">?</span> showHeader <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleFooterChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> footer<span class="token punctuation">:</span> enable <span class="token operator">?</span> footer <span class="token punctuation">:</span> undefined <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleRowSelectionChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> rowSelection<span class="token punctuation">:</span> enable <span class="token operator">?</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">:</span> undefined <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleScollChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> scroll<span class="token punctuation">:</span> enable <span class="token operator">?</span> scroll <span class="token punctuation">:</span> undefined <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handleDataChange <span class="token operator">=</span> <span class="token punctuation">(</span>hasData<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> hasData <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  handlePaginationChange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> value <span class="token punctuation">}</span> <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      pagination<span class="token punctuation">:</span> value <span class="token operator">===</span> <span class="token string">'none'</span> <span class="token operator">?</span> <span class="token boolean">false</span> <span class="token punctuation">:</span> <span class="token punctuation">{</span> position<span class="token punctuation">:</span> value <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>components-table-demo-control-bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Form</span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Bordered<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>bordered<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleToggle</span><span class="token punctuation">(</span><span class="token string">'bordered'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>loading<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleToggle</span><span class="token punctuation">(</span><span class="token string">'loading'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleTitleChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Column</span> <span class="token attr-name">Header"</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>showHeader<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleHeaderChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>footer<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleFooterChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Expandable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>expandedRowRender<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleExpandChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>rowSelection<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleRowSelectionChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Fixed</span> <span class="token attr-name">Header"</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>scroll<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleScollChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Has</span> <span class="token attr-name">Data"</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>hasData<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleDataChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Size<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Group</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>size<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSizeChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Group</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Group</span>
                <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>pagination <span class="token operator">?</span> state<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>position <span class="token punctuation">:</span> <span class="token string">'none'</span><span class="token punctuation">}</span></span>
                <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handlePaginationChange<span class="token punctuation">}</span></span>
              <span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>both<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Both<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>None<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Group</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Form</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token operator">&lt;</span>Table <span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">}</span> columns<span class="token operator">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span> dataSource<span class="token operator">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>hasData <span class="token operator">?</span> data <span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div></div><section class="markdown api-container"><h2 id="API"><span>API</span><a href="#API" class="anchor">#</a></h2><h3 id="Table"><span>Table</span><a href="#Table" class="anchor">#</a></h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>bordered</td><td>是否展示外边框和列边框</td><td>boolean</td><td>false</td></tr><tr><td>childrenColumnName</td><td>指定树形结构的列名</td><td>string<!-- -->[<!-- -->]</td><td>children</td></tr><tr><td>columns</td><td>表格列的配置描述，具体项见下表</td><td><a href="https://git.io/vMMXC">ColumnProps</a>[<!-- -->]</td><td>-</td></tr><tr><td>components</td><td>覆盖默认的 table 元素</td><td><a href="https://git.io/fANxz">TableComponents</a></td><td>-</td></tr><tr><td>dataSource</td><td>数据数组</td><td>any<!-- -->[<!-- -->]</td><td></td></tr><tr><td>defaultExpandAllRows</td><td>初始时，是否展开所有行</td><td>boolean</td><td>false</td></tr><tr><td>defaultExpandedRowKeys</td><td>默认展开的行</td><td>string<!-- -->[<!-- -->]</td><td>-</td></tr><tr><td>expandedRowKeys</td><td>展开的行，控制属性</td><td>string<!-- -->[<!-- -->]</td><td>-</td></tr><tr><td>expandedRowRender</td><td>额外的展开行</td><td>Function(record, index, indent, expanded):ReactNode</td><td>-</td></tr><tr><td>expandRowByClick</td><td>通过点击行来展开子行</td><td>boolean</td><td><code>false</code></td></tr><tr><td>footer</td><td>表格尾部</td><td>Function(currentPageData)</td><td></td></tr><tr><td>indentSize</td><td>展示树形数据时，每层缩进的宽度，以 px 为单位</td><td>number</td><td>15</td></tr><tr><td>loading</td><td>页面是否加载中</td><td>boolean<!-- -->|<a href="https://ant.design/components/spin-cn/#API">object</a> (<a href="https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135">更多</a>)</td><td>false</td></tr><tr><td>locale</td><td>默认文案设置，目前包括排序、过滤、空数据文案</td><td>object</td><td>filterConfirm: &#x27;确定&#x27; <br/> filterReset: &#x27;重置&#x27; <br/> emptyText: &#x27;暂无数据&#x27; <br/> <a href="https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511">默认值</a></td></tr><tr><td>pagination</td><td>分页器，参考<a href="#pagination">配置项</a>或 <a href="/components/pagination-cn/">pagination</a>，设为 false 时不展示和进行分页</td><td>object</td><td></td></tr><tr><td>rowClassName</td><td>表格行的类名</td><td>Function(record, index):string</td><td>-</td></tr><tr><td>rowKey</td><td>表格行 key 的取值，可以是字符串或一个函数</td><td>string<!-- -->|<!-- -->Function(record):string</td><td>&#x27;key&#x27;</td></tr><tr><td>rowSelection</td><td>表格行是否可选择，<a href="#rowSelection">配置项</a></td><td>object</td><td>null</td></tr><tr><td>scroll</td><td>设置横向或纵向滚动，也可用于指定滚动区域的宽和高，建议为 <code>x</code> 设置一个数字，如果要设置为 <code>true</code>，需要配合样式 <code>.ant-table td { white-space: nowrap; }</code></td><td>{ x: number <!-- -->|<!-- --> true, y: number }</td><td>-</td></tr><tr><td>showHeader</td><td>是否显示表头</td><td>boolean</td><td>true</td></tr><tr><td>size</td><td>正常或迷你类型，<code>default</code> or <code>small</code></td><td>string</td><td>default</td></tr><tr><td>title</td><td>表格标题</td><td>Function(currentPageData)</td><td></td></tr><tr><td>onChange</td><td>分页、排序、筛选变化时触发</td><td>Function(pagination, filters, sorter, extra: { currentDataSource: [] })</td><td></td></tr><tr><td>onExpand</td><td>点击展开图标时触发</td><td>Function(expanded, record)</td><td></td></tr><tr><td>onExpandedRowsChange</td><td>展开的行变化时触发</td><td>Function(expandedRows)</td><td></td></tr><tr><td>onHeaderRow</td><td>设置头部行属性</td><td>Function(column, index)</td><td>-</td></tr><tr><td>onRow</td><td>设置行属性</td><td>Function(record, index)</td><td>-</td></tr></tbody></table><h4 id="onRow-用法"><span>onRow 用法</span><a href="#onRow-用法" class="anchor">#</a></h4><p>适用于 <code>onRow</code> <code>onHeaderRow</code> <code>onCell</code> <code>onHeaderCell</code>。</p><pre class="language-jsx"><code><span class="token operator">&lt;</span>Table
  onRow<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      onClick<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>       <span class="token comment" spellcheck="true">// 点击行</span>
      onMouseEnter<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token comment" spellcheck="true">// 鼠标移入行</span>
      onXxxx<span class="token operator">...</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">}</span>
  onHeaderRow<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>column<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      onClick<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>        <span class="token comment" spellcheck="true">// 点击表头行</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">></span></code></pre><h3 id="Column"><span>Column</span><a href="#Column" class="anchor">#</a></h3><p>列描述数据对象，是 columns 中的一项，Column 使用相同的 API。</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>align</td><td>设置列内容的对齐方式</td><td>&#x27;left&#x27; <!-- -->|<!-- --> &#x27;right&#x27; <!-- -->|<!-- --> &#x27;center&#x27;</td><td>&#x27;left&#x27;</td></tr><tr><td>className</td><td>列的 className</td><td>string</td><td>-</td></tr><tr><td>colSpan</td><td>表头列合并,设置为 0 时，不渲染</td><td>number</td><td></td></tr><tr><td>dataIndex</td><td>列数据在数据项中对应的 key，支持 <code>a.b.c</code> 的嵌套写法</td><td>string</td><td>-</td></tr><tr><td>defaultSortOrder</td><td>默认排序顺序</td><td>&#x27;ascend&#x27; <!-- -->|<!-- --> &#x27;descend&#x27;</td><td>-</td></tr><tr><td>filterDropdown</td><td>可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互</td><td>ReactNode</td><td>-</td></tr><tr><td>filterDropdownVisible</td><td>用于控制自定义筛选菜单是否可见</td><td>boolean</td><td>-</td></tr><tr><td>filtered</td><td>标识数据是否经过过滤，筛选图标会高亮</td><td>boolean</td><td>false</td></tr><tr><td>filteredValue</td><td>筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组</td><td>string<!-- -->[<!-- -->]</td><td>-</td></tr><tr><td>filterIcon</td><td>自定义 filter 图标。</td><td>ReactNode<!-- -->|<!-- -->(filtered: boolean) =&gt; ReactNode</td><td>false</td></tr><tr><td>filterMultiple</td><td>是否多选</td><td>boolean</td><td>true</td></tr><tr><td>filters</td><td>表头的筛选菜单项</td><td>object<!-- -->[<!-- -->]</td><td>-</td></tr><tr><td>fixed</td><td>列是否固定，可选 <code>true</code>(等效于 left) <code>&#x27;left&#x27;</code> <code>&#x27;right&#x27;</code></td><td>boolean<!-- -->|<!-- -->string</td><td>false</td></tr><tr><td>key</td><td>React 需要的 key，如果已经设置了唯一的 <code>dataIndex</code>，可以忽略这个属性</td><td>string</td><td>-</td></tr><tr><td>render</td><td>生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格<a href="#components-table-demo-colspan-rowspan">行/列合并</a></td><td>Function(text, record, index) {}</td><td>-</td></tr><tr><td>sorter</td><td>排序函数，本地排序使用一个函数(参考 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">Array.sort</a> 的 compareFunction)，需要服务端排序可设为 true</td><td>Function<!-- -->|<!-- -->boolean</td><td>-</td></tr><tr><td>sortOrder</td><td>排序的受控属性，外界可用此控制列的排序，可设置为 <code>&#x27;ascend&#x27;</code> <code>&#x27;descend&#x27;</code> <code>false</code></td><td>boolean<!-- -->|<!-- -->string</td><td>-</td></tr><tr><td>title</td><td>列头显示文字</td><td>ReactNode<!-- -->|<!-- -->({ sortOrder, filters }) =&gt; ReactNode</td><td>-</td></tr><tr><td>width</td><td>列宽度</td><td>string<!-- -->|<!-- -->number</td><td>-</td></tr><tr><td>onCell</td><td>设置单元格属性</td><td>Function(record)</td><td>-</td></tr><tr><td>onFilter</td><td>本地模式下，确定筛选的运行函数</td><td>Function</td><td>-</td></tr><tr><td>onFilterDropdownVisibleChange</td><td>自定义筛选菜单可见变化时调用</td><td>function(visible) {}</td><td>-</td></tr><tr><td>onHeaderCell</td><td>设置头部单元格属性</td><td>Function(column)</td><td>-</td></tr></tbody></table><h3 id="ColumnGroup"><span>ColumnGroup</span><a href="#ColumnGroup" class="anchor">#</a></h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title</td><td>列头显示文字</td><td>string<!-- -->|<!-- -->ReactNode</td><td>-</td></tr></tbody></table><h3 id="pagination"><span>pagination</span><a href="#pagination" class="anchor">#</a></h3><p>分页的配置项。</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>position</td><td>指定分页显示的位置</td><td>&#x27;top&#x27; <!-- -->|<!-- --> &#x27;bottom&#x27; <!-- -->|<!-- --> &#x27;both&#x27;</td><td>&#x27;bottom&#x27;</td></tr></tbody></table><p>更多配置项，请查看 <a href="/components/pagination-cn/"><code>Pagination</code></a>。</p><h3 id="rowSelection"><span>rowSelection</span><a href="#rowSelection" class="anchor">#</a></h3><p>选择功能的配置。</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>columnWidth</td><td>自定义列表选择框宽度</td><td>string<!-- -->|<!-- -->number</td><td>-</td></tr><tr><td>columnTitle</td><td>自定义列表选择框标题</td><td>string<!-- -->|<!-- -->React.ReactNode</td><td>-</td></tr><tr><td>fixed</td><td>把选择框列固定在左边</td><td>boolean</td><td>-</td></tr><tr><td>getCheckboxProps</td><td>选择框的默认属性配置</td><td>Function(record)</td><td>-</td></tr><tr><td>hideDefaultSelections</td><td>去掉『全选』『反选』两个默认选项</td><td>boolean</td><td>false</td></tr><tr><td>selectedRowKeys</td><td>指定选中项的 key 数组，需要和 onChange 进行配合</td><td>string<!-- -->[<!-- -->]</td><td>[<!-- -->]</td></tr><tr><td>selections</td><td>自定义选择项 <a href="#selection">配置项</a>, 设为 <code>true</code> 时使用默认选择项</td><td>object<!-- -->[<!-- -->]<!-- -->|<!-- -->boolean</td><td>true</td></tr><tr><td>type</td><td>多选/单选，<code>checkbox</code> or <code>radio</code></td><td>string</td><td><code>checkbox</code></td></tr><tr><td>onChange</td><td>选中项发生变化时的回调</td><td>Function(selectedRowKeys, selectedRows)</td><td>-</td></tr><tr><td>onSelect</td><td>用户手动选择/取消选择某行的回调</td><td>Function(record, selected, selectedRows, nativeEvent)</td><td>-</td></tr><tr><td>onSelectAll</td><td>用户手动选择/取消选择所有行的回调</td><td>Function(selected, selectedRows, changeRows)</td><td>-</td></tr><tr><td>onSelectInvert</td><td>用户手动选择反选的回调</td><td>Function(selectedRows)</td><td>-</td></tr></tbody></table><h3 id="selection"><span>selection</span><a href="#selection" class="anchor">#</a></h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>key</td><td>React 需要的 key，建议设置</td><td>string</td><td>-</td></tr><tr><td>text</td><td>选择项显示的文字</td><td>string<!-- -->|<!-- -->React.ReactNode</td><td>-</td></tr><tr><td>onSelect</td><td>选择项点击回调</td><td>Function(changeableRowKeys)</td><td>-</td></tr></tbody></table><h2 id="在-TypeScript-中使用"><span>在 TypeScript 中使用</span><a href="#在-TypeScript-中使用" class="anchor">#</a></h2><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ColumnProps <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd/lib/table'</span><span class="token punctuation">;</span>

<span class="token keyword">interface</span> <span class="token class-name">IUser</span> <span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> number<span class="token punctuation">;</span>
  name<span class="token punctuation">:</span> string<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> columns<span class="token punctuation">:</span> ColumnProps<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>IUser</span><span class="token punctuation">></span></span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
  dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data<span class="token punctuation">:</span> IUser<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'Jack'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">UserTable</span> <span class="token keyword">extends</span> <span class="token class-name">Table</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>IUser</span><span class="token punctuation">></span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>UserTable</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>

<span class="token comment" spellcheck="true">// 使用 JSX 风格的 API</span>
<span class="token keyword">class</span> <span class="token class-name">NameColumn</span> <span class="token keyword">extends</span> <span class="token class-name">Table<span class="token punctuation">.</span>Column</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>IUser</span><span class="token punctuation">></span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>UserTable</span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NameColumn</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span> <span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>UserTable</span><span class="token punctuation">></span></span></code></pre><h2 id="注意"><span>注意</span><a href="#注意" class="anchor">#</a></h2><p>按照 <a href="https://facebook.github.io/react/docs/lists-and-keys.html#keys">React 的规范</a>，所有的组件数组必须绑定 key。在 Table 中，<code>dataSource</code> 和 <code>columns</code> 里的数据值都需要指定 <code>key</code> 值。对于 <code>dataSource</code> 默认将每列数据的 <code>key</code> 属性作为唯一的标识。</p><p>如果你的数据没有这个属性，务必使用 <code>rowKey</code> 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。</p><p><img src="https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png" alt="控制台警告"/></p><pre class="language-jsx"><code><span class="token comment" spellcheck="true">// 比如你的数据主键是 uid</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>uid<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// 或</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">rowKey</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>record <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>uid<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span></code></pre></section></article></div></div><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-lg-offset-6 ant-col-xl-19 ant-col-xl-offset-5 ant-col-xxl-20 ant-col-xxl-offset-4"><section class="prev-next-nav"><a class="prev-page" href="/components/tooltip-cn/"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>Tooltip</span><span class="chinese">文字提示</span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a><a class="next-page" href="/components/tabs-cn/"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>Tabs</span><span class="chinese">标签页</span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></section></div></div></div><footer id="footer"><div class="footer-wrap"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>相关资源</span></h2><div><a href="http://pro.ant.design">Ant Design Pro</a></div><div><a href="http://mobile.ant.design">Ant Design Mobile</a></div><div><a href="http://ng.ant.design">NG-ZORRO</a><span> - </span>Ant Design of Angular</div><div><a href="http://ng.mobile.ant.design">NG-ZORRO-MOBILE</a></div><div><a target="_blank " href="https://github.com/websemantics/awesome-ant-design"><span>Awesome Ant Design</span></a></div><div><span class="ant-badge"><a target="_blank" rel="noopener noreferrer" href="http://kitchen.alipay.com">Kitchen</a><span> - </span><span>Sketch 工具集</span><sup data-show="true" class="ant-scroll-number ant-badge-dot" style="right:-3px;margin-top:0"></sup></span></div><div><a href="http://scaffold.ant.design">Scaffolds</a><span> - </span><span>脚手架市场</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://umijs.org/">Umi</a> - <span>React 应用开发框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva">dva</a> - <span>数据流前端框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design">Ant Motion</a><span> - </span><span>设计动效</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">Axure Library</a><span> - </span><span>Axure 部件库</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design">Ant UX</a><span> - </span><span>页面逻辑素材</span></div><div><a target="_blank " href="http://ant-design.gitee.io/"><span>国内镜像站点 🇨🇳</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>社区</span></h2><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/antdesign"><span>知乎专栏</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://medium.com/ant-design/">Medium</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://twitter.com/antdesignui">Twitter</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/xtech"><span>体验科技专栏</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://seeconf.alipay.com/">SEE Conf</a><span> - </span><span>蚂蚁体验科技大会</span></div><div><a target="_blank " href="/docs/spec/work-with-us"><span>加入我们</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>帮助</span></h2><div><a target="_blank " href="https://github.com/ant-design/ant-design">GitHub</a></div><div><a href="/changelog"><span>更新记录</span></a></div><div><a target="_blank " href="https://www.yuque.com/ant-design/course"><span>Ant Design 实战教程</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="/docs/react/faq"><span>常见问题</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design"><span>在线讨论 (中文)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english"><span>在线讨论 (English)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/"><span>报告 Bug</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues"><span>讨论列表</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd"><span>StackOverflow</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd"><span>SegmentFault</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><img class="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="AFX Cloud"/><span>更多产品</span></h2><div><a target="_blank" rel="noopener noreferrer" href="https://yuque.com/"><span>语雀</span></a><span> - </span><span>知识创作与分享工具</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://yunfengdie.com/"><span>云凤蝶</span></a><span> - </span><span>移动建站平台</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a><span> - </span><span>数据可视化</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a><span> - </span><span>企业级 Node 开发框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://xcloud.alipay.com/"><span>蚂蚁体验云</span></a></div><div style="margin-top:20px"><div><div style="padding:4px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer"><div style="width:80px;height:16px;border-radius:2px;background:#1890ff"></div></div></div></div></div></div></div></div><div class="bottom-bar">Made with <span class="heart">❤</span> by<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com"><span>AFX</span></a></div></footer></div>
    </div>
    <script src="/common.js"></script>
    <script src="/index.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
    <script>
    if (!location.port) {
      // Enable Google Analytics
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-72788897-1');
    }
    </script>
    <!-- Hotjar Tracking Code for ant.design -->
    <script>
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:473408,hjsv:5};
      a=o.getElementsByTagName('head')[0];
      r=o.createElement('script');r.async=1;
      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
      a.appendChild(r);
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
  </body>
</html>
